css 伪类和伪元素剖析

一、出现背景

www.w3.org/TR/CSS2/sel…

In CSS 2.1, style is normally attached to an element based on its position in the document tree. This simple model is sufficient for many cases, but some common publishing scenarios may not be possible due to the structure of the document tree. For instance, in HTML 4 (see [HTML4]), no element refers to the first line of a paragraph, and therefore no simple CSS selector may refer to it. CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.

简要来讲：在css2.1中，样式每每是根据文档树中的元素来进行选择的，但在真实的 html 内容中，一些常见的场景没法进行选择定位，好比一段文本段落的第一行，没有选择器可以指向它，css引入伪对象的概念（伪类和伪元素），来容许选择基于文档树以外的信息

二、伪类

伪类根据元素的名称、属性或内容之外的特征对元素进行分类，原则上，这些特征不能从文档树中推导出来。伪类能够是动态的，由于当用户与文档交互时，元素可能得到或丢失伪类。 举例：

• ele:hover：被鼠标hover的元素
• ele:active：被鼠标激活过的元素
• ele:first-child：第一个子元素

三、伪元素

用于选择一些不在文档树中的“抽象”元素对象，从而能够为其添加样式及内容 举例

• ele::before是选择元素的前置区域对象
• ele::selection是选择对应元素被选的内容区域对象

四、伪元素使用单冒号仍是双冒号？

css3规范中要求使用双冒号(::)表示伪元素，以此来区分于伪类，好比::before和::after等伪元素使用双冒号，:hover和:active等伪类使用单冒号，使用单冒号是为了兼容以前的低版本浏览器，但在建议中仍是使用双冒号表示伪元素。

五、相同点

• 伪类和伪元素都是选择器
• 伪类和伪元素都是独立于正常文档树以外的（因此是“伪造”）
• 伪类和伪元素选择的对象其实都是基于文档树，虽然独立于文档树，但没有脱离文档树 — 巧妇难为无米之炊！

六、不一样点

• 伪类是为了方便开发者选择特定元素而设计的(好比被鼠标所hover的元素ele :hover)，伪类每每能选择到具体的文档树元素。但伪元素选择的不是具体的文档树元素，更多的是一个独立于文档树的“抽象元素”，好比文本中的第一个字母(::first-letter)，文档元素的前置区域元素(::before)

七、应用

Ant-design 组件库中，经过为对应的示例块添加锚点来进行定位(ant.design/components/…)，当鼠标切到对应的锚点后，浏览器会出现对应的锚点连接#target-url，css 经过 ele:target 伪类来选择对应的元素，对为其添加样式。

.code-box:target {
    border: 1px solid #1890ff;
}
复制代码

参考：

• www.w3.org/TR/CSS2/sel…