CSS 伪类
什么是伪类？
伪类用于定义元素的特殊状态。
例如，它可以用于
- 当用户将鼠标悬停在元素上时进行样式设置
- 为已访问和未访问的链接设置不同的样式
- 当元素获得焦点时进行样式设置
将鼠标悬停在我上面
语法
伪类的语法
选择器:伪类 {
属性: 值;
}
锚点伪类
链接可以显示不同的方式
示例
/* 未访问的链接 */
a:link {
color: #FF0000;
}
/* 已访问的链接 */
a:visited {
color: #00FF00;
}
/* 鼠标悬停在链接上 */
a:hover {
color: #FF00FF;
}
/* 选中的链接 */
a:active {
color: #0000FF;
}
自己动手试一试 »
注意： 在 CSS 定义中，a:hover 必须在 a:link 和 a:visited 之后，才能生效！在 CSS 定义中，a:active 必须在 a:hover 之后，才能生效！伪类名称不区分大小写。
伪类与 HTML 类
伪类可以与 HTML 类结合使用
当您将鼠标悬停在示例中的链接上时，它将改变颜色
悬停在 <div> 上
在 <div> 元素上使用 :hover 伪类的一个示例
简单的工具提示悬停
将鼠标悬停在 <div> 元素上可显示一个 <p> 元素（类似于工具提示）
将鼠标悬停在我上面可显示 <p> 元素。
Tada! 我在这里！
示例
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
自己动手试一试 »
CSS - :first-child 伪类
:first-child 伪类匹配指定元素的第一个子元素。
匹配第一个 <p> 元素
在下面的示例中，选择器匹配任何作为某个元素第一个子元素的 <p> 元素
匹配所有 <p> 元素中的第一个 <i> 元素
在下面的示例中，选择器匹配所有 <p> 元素中的第一个 <i> 元素
匹配所有第一个子元素 <p> 元素中的所有 <i> 元素
在下面的示例中，选择器匹配作为另一个元素第一个子元素的 <p> 元素中的所有 <i> 元素
CSS - :lang 伪类
:lang 伪类允许您为不同语言定义特殊规则。
在下面的示例中，:lang 为 lang="no" 的 <q> 元素定义了引号
示例
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>一些文本 <q lang="no">段落中的引用</q> 一些文本。</p>
</body>
</html>
自己动手试一试 »
更多示例
为超链接添加不同的样式
此示例演示了如何为超链接添加其他样式。
:focus 的使用
此示例演示了如何使用 :focus 伪类。
所有 CSS 伪类
| 选择器 | 示例 | 示例描述 |
|---|---|---|
| :active | a:active | 选择活动链接 |
| :checked | input:checked | 选择所有已选中的 <input> 元素 |
| :disabled | input:disabled | 选择所有禁用的 <input> 元素 |
| :empty | p:empty | 选择所有没有子元素的 <p> 元素 |
| :enabled | input:enabled | 选择所有启用的 <input> 元素 |
| :first-child | p:first-child | 选择所有作为其父元素第一个子元素的 <p> 元素 |
| :first-of-type | p:first-of-type | 选择作为其父元素的第一个 <p> 元素的所有 <p> 元素 |
| :focus | input:focus | 选择获得焦点的 <input> 元素 |
| :hover | a:hover | 鼠标悬停时选择链接 |
| :in-range | input:in-range | 选择值在指定范围内的 <input> 元素 |
| :invalid | input:invalid | 选择所有值无效的 <input> 元素 |
| :lang(语言) | p:lang(it) | 选择 lang 属性值以 "it" 开头的每个 <p> 元素 |
| :last-child | p:last-child | 选择所有作为其父元素最后一个子元素的 <p> 元素 |
| :last-of-type | p:last-of-type | 选择作为其父元素的最后一个 <p> 元素的所有 <p> 元素 |
| :link | a:link | 选择所有未访问的链接 |
| :not(selector) | :not(p) | 选择所有不是 <p> 元素的元素 |
| :nth-child(n) | p:nth-child(2) | 选择作为其父元素的第二个子元素的所有 <p> 元素 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择作为其父元素的第二个子元素的所有 <p> 元素，从最后一个子元素开始计数 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择作为其父元素的第二个 <p> 元素的所有 <p> 元素，从最后一个子元素开始计数 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择作为其父元素的第二个 <p> 元素的所有 <p> 元素 |
| :only-of-type | p:only-of-type | 选择作为其父元素的唯一 <p> 元素的所有 <p> 元素 |
| :only-child | p:only-child | 选择作为其父元素的唯一子元素的所有 <p> 元素 |
| :optional | input:optional | 选择没有 "required" 属性的 <input> 元素 |
| :out-of-range | input:out-of-range | 选择值不在指定范围内的 <input> 元素 |
| :read-only | input:read-only | 选择指定了 "readonly" 属性的 <input> 元素 |
| :read-write | input:read-write | 选择没有 "readonly" 属性的 <input> 元素 |
| :required | input:required | 选择指定了 "required" 属性的 <input> 元素 |
| :root | root | 选择文档的根元素 |
| :target | #news:target | 选择当前活动的 #news 元素（点击包含该锚点名称的 URL） |
| :valid | input:valid | 选择所有值有效的 <input> 元素 |
| :visited | a:visited | 选择所有已访问的链接 |
所有 CSS 伪元素
| 选择器 | 示例 | 示例描述 |
|---|---|---|
| ::after | p::after | 在每个 <p> 元素之后插入内容 |
| ::before | p::before | 在每个 <p> 元素之前插入内容 |
| ::first-letter | p::first-letter | 选择每个 <p> 元素的第一个字母 |
| ::first-line | p::first-line | 选择每个 <p> 元素的第一行 |
| ::marker | ::marker | 选择列表项的标记 |
| ::selection | p::selection | 选择用户选定的元素部分 |
