CSS 伪类
什么是伪类？
伪类用于定义元素的特殊状态。
例如，它可用于：
- 当用户鼠标悬停在元素上时设置元素的样式
- 对访问过的和未访问过的链接设置不同的样式
- 当元素获得焦点时设置其样式
鼠标移到我身上
句法
伪类的语法：
选择器：伪类{
适当的价值;
}
锚点伪类
链接可以以不同的方式显示：
例子
/* 未访问的链接 */
一条链接 {
颜色：#FF0000；
}
/* 访问过的链接 */
a:已访问{
颜色：#00FF00；
}
/* 鼠标悬停在链接上 */
悬停{
颜色：#FF00FF；
}
/* 选定的链接 */
一：活跃{
颜色：#0000FF；
}
亲自尝试 »
笔记： a:hover 必须紧随其后a:link 和a:visited 在 CSS 定义中才能有效！a:active 必须紧随其后a:hover 在 CSS 定义中才能生效！伪类名不区分大小写。
伪类和 HTML 类
伪类可以与 HTML 类结合：
当您将鼠标悬停在示例中的链接上时，它将改变颜色：
将鼠标悬停在<div>
使用示例 :hover 伪类<div>元素：
简单的工具提示悬停
将鼠标悬停在<div>元素来显示<p>元素（如工具提示）：
将鼠标悬停在我上方以显示<p>元素。
哒哒！我来了！
CSS - :first-child 伪类
这 :first-child 伪类匹配作为另一个元素的第一个子元素的指定元素。
匹配第一个<p>元素
在以下示例中，选择器匹配任意<p>作为任何元素的第一个子元素的元素：
匹配
在以下示例中，选择器匹配
匹配
在以下示例中，选择器匹配
CSS - :lang 伪类
这 :lang 伪类允许您为不同的语言定义特殊规则。
在下面的例子中， :lang 定义<q>lang="no" 元素的引号：</q>
例子
<html>
<head>
<style>
q:lang(否) {
引号：“~” “~”；
}
</style>
</head>
<body>
<p>一些文本<q lang="no">段落中的引用</q>一些文本。</p>
</body>
</html>
亲自尝试 »
更多示例
为超链接添加不同的样式
本例演示如何向超链接添加其他样式。
使用 :focus
此示例演示了如何使用 :focus 伪类。
所有 CSS 伪类
| 选择器 | 例子 | 示例说明 |
|---|---|---|
| ：积极的 | 答：活跃 | 选择活动链接 |
| :已检查 | 输入：已检查 | 选择每个已检查的<input>元素 |
| :已禁用 | 输入：已禁用 | 选择每一个残疾人<input>元素 |
| ：空的 | p：空 | 选择每一个<p>没有子元素 |
| :启用 | 输入：启用 | 选择每个启用的<input>元素 |
| ：第一个孩子 | p:第一个孩子 | 选择每一个<p>其父元素的第一个子元素 |
| :first-of-type | p:第一个类型 | 选择每一个<p>第一个元素<p>其父元素 |
| ：重点 | 输入：焦点 | 选择<input>具有焦点的元素 |
| ：徘徊 | 悬停 | 鼠标悬停时选择链接 |
| ：在范围内 | 输入：在范围内 | 选择<input>具有指定范围内的值的元素 |
| ：无效的 | 输入：无效 | 选择全部<input>具有无效值的元素 |
| : 朗 (语言) | p: 语言 (it) | 选择每一个<p> lang 属性值以“it”开头的元素 |
| ：最后一个孩子 | p:最后一个孩子 | 选择每一个<p>父元素的最后一个子元素 |
| :last-of-type | p:最后一种类型 | 选择每一个<p>最后一个元素<p>其父元素 |
| ：关联 | 一条链接 | 选择所有未访问的链接 |
| :not（选择器） | :不（p） | 选择所有不属于<p>元素 |
| :nth-child(n) | p:第 n 个子项(2) | 选择每一个<p>父元素的第二个子元素 |
| :倒数第 n 个子元素 (n) | p:倒数第 n 个孩子（2） | 选择每一个<p>从最后一个子元素开始算起，是其父元素的第二个子元素 |
| :第 n 个最后类型(n) | p:第 n 个最后类型的值(2) | 选择每一个<p>第二个元素<p>其父元素的元素，从最后一个子元素开始算起 |
| :nth-of-type(n) | p:第 n 个类型(2) | 选择每一个<p>第二个元素<p>其父元素 |
| :only-of-type | p:only-of-type | 选择每一个<p>唯一元素<p>其父元素 |
| ：唯一的孩子 | p:独生子女 | 选择每一个<p>父元素的唯一子元素 |
| ：选修的 | 输入：可选 | 选择<input>没有“required”属性的元素 |
| ：超出范围 | 输入：超出范围 | 选择<input>值超出指定范围的元素 |
| ：只读 | 输入：只读 | 选择<input>指定了“readonly”属性的元素 |
| :读写 | 输入：读写 | 选择<input>没有“readonly”属性的元素 |
| ：必需的 | 输入：必填 | 选择<input>指定了“required”属性的元素 |
| ：根 | 根 | 选择文档的根元素 |
| ：目标 | #新闻：目标 | 选择当前活动的 #news 元素（单击包含该锚点名称的 URL） |
| ：有效的 | 输入：有效 | 选择全部<input>具有有效值的元素 |
| :访问过 | 已访问 | 选择所有访问过的链接 |
所有 CSS 伪元素
| 选择器 | 例子 | 示例说明 |
|---|---|---|
| ：：后 | p::之后 | 在每一个之后插入内容<p>元素 |
| ：：前 | p::之前 | 在每一个之前插入内容<p>元素 |
| ::首字母 | p::首字母 | 选择每个的第一个字母<p>元素 |
| ：：第一行 | p::第一行 | 选择每个的第一行<p>元素 |
| ::选择 | p::选择 | 选择用户选择的元素部分 |
