13、深入理解CSS伪类与伪元素

深入理解CSS伪类与伪元素

1. 伪类与伪元素简介

在网页渲染中，并非所有显示的内容都在HTML文件里有明确标记。比如段落的首字母或首行，它们没有被标记为独立元素。同样，元素可以基于特定属性进行分类，而无需类属性。像有序列表的首个条目，具有“首个”属性，但HTML文件里没有类属性来明确标识它。这些只存在于渲染页面而非HTML文档中的元素和类属性，被称为伪元素和伪类。即便它们不是HTML文档的一部分，我们仍能为其编写样式规则。

2. 伪类

伪类是基于元素的当前状态、位置或在文档中的用途对元素进行的分类。伪类的样式规则使用选择器 element:pseudo-class 来定义，其中 element 是文档中的元素， pseudo-class 是CSS伪类的名称。伪类分为结构伪类和动态伪类。结构伪类根据元素在HTML文档结构中的位置对元素进行分类。以下是CSS支持的结构伪类列表：
| 伪类 | 匹配情况 |
| — | — |
| :root | 文档层次结构中的顶级元素（即html元素） |
| :empty | 没有内容的元素 |
| :only-child | 没有兄弟元素的元素 |
| :first-child | 父元素的第一个子元素 |
| :last-child | 父元素的最后一个子元素 |
| :first-of-type | 父元素中匹配指定类型的第一个后代元素 |
| :last-of-type | 父元素中匹配指定类型的最后一个后代元素 |
| :nth-of-type