我们可以使用 css 伪类向 html 中的现有元素添加特定样式,这些伪类选择具有特定状态的元素,例如(悬停、访问、禁用等)
注意 strong> - 为了将 CSS 伪类与伪元素分开,在 CSS3 中,伪类使用单冒号表示法。
语法
以下是在元素上使用 CSS 伪类的语法-
Selector:pseudo-class {
css-property: /*value*/;
}以下是所有可用的 CSS 伪类 -
| Sr.No | 伪类和描述 |
|---|---|
| 1 | 活动 它选择活动提到的元素 立即学习“前端免费学习笔记(深入)”; |
| 2 |
已检查 它选择每个已检查提到的元素 |
|
禁用 它选择每个禁用提到的元素 td> |
|
| 4 |
空 它选择每个提到的元素没有子级 |
| 5 |
已启用 它选择每个启用的提到的元素 |
| 6 |
first-child 它选择作为其父级的第一个子级的每个提到的元素 |
| 7 |
first-of-type 它选择第一个提到的每个元素其父级元素 |
| 8 |
焦点 它选择具有焦点的上述元素 |
| 9 td> |
悬停 鼠标悬停时选择提到的元素 |
| 10 |
在范围内 它选择指定范围内值的提及元素 |
| 11 |
无效 它选择所有提到的元素均具有无效值 |
| 12 |
lang (语言) 它选择每个提到的元素,其 lang 属性值以“语言”开头 |
| 13 |
last-child 它选择作为其父级的最后一个子级 |
| 14 |
last-of -type 它选择其父元素最后提到的每个元素 |
| 15 |
链接 它选择所有未访问的提及元素 |
| 16 |
not(selector) 它选择所有不是的元素提到的元素 |
| 17 |
nth-child(n ) 它选择作为其父级的第 n 个子级的每个提到的元素 |
| 18 |
nth-last-child(n) 它选择作为其父级的第 n 个子级的每个提到的元素,从最后一个孩子开始计算 |
| 19 |
nth-last -oftype(n) 它选择每个提到的元素,即其父元素中第 n 个提到的元素,从最后一个子元素开始计算 |
| 20 |
nth-of-type(n) 它选择每个提到的元素是其父元素中第 n 个提到的元素 |
| 21 | only-of-type 它选择作为其父元素唯一提及的每个提到的元素 |
| 22 |
only-child 它选择作为唯一子元素的每个提到的元素其父级 |
| 23 |
可选 它选择没有“required”属性的上述元素 |
| 24 td> |
超出范围 它选择值超出指定范围的提到的元素 |
| 25 |
只读 它使用“readonly”选择提到的元素指定属性 |
| 26 |
读写 它选择没有“readonly”属性的上述元素 |
| 27 |
required 它选择指定了“required”属性的提到元素 |
| 28 |
root 它选择文档的根元素
|
| 29 |
目标 它选择当前提到的活动元素(单击包含该锚点名称的 URL) |
| 30 |
有效 它选择具有有效值的所有提到的元素 |
| 31 |
访问过 它选择所有访问过的提到的元素 | tr>
示例
让我们看一个 CSS 伪类的示例 -
现场演示
CSS Anchor Pseudo Classes
输出
这将产生以下输出 -

示例
让我们看一下 CSS 伪类的另一个示例 -
现场演示
CSS Pseudo Classes










