CSS 伪类
什么是伪类？
伪类用于定义元素的特殊状态。
例如，它可以用来
- 当用户将鼠标悬停在元素上时设置样式
- 以不同的方式设置已访问和未访问链接的样式
- 当元素获得焦点时设置样式
将鼠标悬停在我身上
语法
伪类的语法
selector:pseudo-class {
property: value;
}
锚点伪类
链接可以以不同的方式显示
示例
/* 未访问链接 */
a:link {
color: #FF0000;
}
/* 已访问链接 */
a:visited {
color: #00FF00;
}
/* 鼠标悬停在链接上 */
a:hover {
color: #FF00FF;
}
/* 选定的链接 */
a:active {
color: #0000FF;
}
自己尝试 »
注意： a:hover 必须在 a:link 和 a:visited 之后出现在 CSS 定义中才能生效！ a:active 必须在 a:hover 之后出现在 CSS 定义中才能生效！ 伪类名称不区分大小写。
伪类和 HTML 类
伪类可以与 HTML 类结合使用
当您将鼠标悬停在示例中的链接上时，它将改变颜色
将鼠标悬停在 <div> 上
在 <div> 元素上使用 :hover 伪类的示例
简单的工具提示悬停
将鼠标悬停在 <div> 元素上以显示 <p> 元素（像工具提示一样）
将鼠标悬停在我身上以显示 <p> 元素。
瞧！我在这里！
示例
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> 元素 |
| :禁用 | input:禁用 | 选择所有禁用的<input>元素 |
| :空 | p:空 | 选择所有没有子元素的<p>元素 |
| :启用 | input:启用 | 选择所有启用的<input>元素 |
| :第一个子元素 | p:第一个子元素 | 选择所有作为其父元素第一个子元素的<p>元素 |
| :第一个同类型元素 | p:第一个同类型元素 | 选择所有作为其父元素第一个<p>元素的<p>元素 |
| :聚焦 | input:聚焦 | 选择获得焦点的<input>元素 |
| :悬停 | a:悬停 | 选择鼠标悬停时的链接 |
| :在范围内 | input:在范围内 | 选择具有在指定范围内的值的<input>元素 |
| :无效 | input:无效 | 选择所有具有无效值的<input>元素 |
| :语言(语言) | p:语言(it) | 选择所有lang属性值以"it"开头的<p>元素 |
| :最后一个子元素 | p:最后一个子元素 | 选择所有作为其父元素最后一个子元素的<p>元素 |
| :最后一个同类型元素 | p:最后一个同类型元素 | 选择所有作为其父元素最后一个<p>元素的<p>元素 |
| :链接 | a:链接 | 选择所有未访问的链接 |
| :非(选择器) | :非(p) | 选择所有不是<p>元素的元素 |
| :第n个子元素(n) | p:第n个子元素(2) | 选择所有作为其父元素第二个子元素的<p>元素 |
| :倒数第n个子元素(n) | p:倒数第n个子元素(2) | 选择所有作为其父元素倒数第二个子元素的<p>元素 |
| :倒数第n个同类型元素(n) | p:倒数第n个同类型元素(2) | 选择所有作为其父元素倒数第二个<p>元素的<p>元素 |
| :第n个同类型元素(n) | p:第n个同类型元素(2) | 选择所有作为其父元素第二个<p>元素的<p>元素 |
| :唯一同类型元素 | p:唯一同类型元素 | 选择所有作为其父元素唯一<p>元素的<p>元素 |
| :唯一子元素 | p:唯一子元素 | 选择所有作为其父元素唯一子元素的<p>元素 |
| :可选 | input:可选 | 选择没有"required"属性的<input>元素 |
| :超出范围 | input:超出范围 | 选择具有在指定范围之外的值的<input>元素 |
| :只读 | input:只读 | 选择具有指定"readonly"属性的<input>元素 |
| :读写 | input:读写 | 选择没有"readonly"属性的<input>元素 |
| :必填 | input:必填 | 选择具有指定"required"属性的<input>元素 |
| :根 | 根 | 选择文档的根元素 |
| :目标 | #新闻:目标 | 选择当前活动的#新闻元素（点击包含该锚点名称的URL） |
| :有效 | input:有效 | 选择所有具有有效值的<input>元素 |
| :已访问 | a:已访问 | 选择所有已访问的链接 |
所有CSS伪元素
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| ::之后 | p::之后 | 在每个<p>元素之后插入内容 |
| ::之前 | p::之前 | 在每个<p>元素之前插入内容 |
| ::第一个字母 | p::第一个字母 | 选择每个<p>元素的第一个字母 |
| ::第一行 | p::第一行 | 选择每个<p>元素的第一行 |
| ::标记 | ::标记 | 选择列表项的标记 |
| ::选择 | p::选择 | 选择用户选择的元素部分 |
