1、出现背景
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引入伪对象的概念（伪类和伪元素），来允许选择基于文档树之外的信息
2、伪类
伪类根据元素的名称、属性或内容以外的特征对元素进行分类，原则上，这些特征不能从文档树中推导出来。伪类可以是动态的，因为当用户与文档交互时，元素可能获得或丢失伪类。 举例：
- ele:hover：被鼠标hover的元素
- ele:active：被鼠标激活过的元素
- ele:first-child：第一个子元素
3、伪元素
用于选择一些不在文档树中的“抽象”元素对象，从而可以为其添加样式及内容 举例
- ele::before是选择元素的前置区域对象
- ele::selection是选择对应元素被选的内容区域对象
4、伪元素使用单冒号还是双冒号？
css3规范中要求使用双冒号(::)表示伪元素，以此来区分于伪类，比如::before和::after等伪元素使用双冒号，:hover和:active等伪类使用单冒号，使用单冒号是为了兼容之前的低版本浏览器，但在建议中还是使用双冒号表示伪元素。
5、相同点
- 伪类和伪元素都是选择器
- 伪类和伪元素都是独立于正常文档树之外的（所以是“伪造”）
- 伪类和伪元素选择的对象其实都是基于文档树，虽然独立于文档树，但没有脱离文档树 — 巧妇难为无米之炊！
6、不同点
- 伪类是为了方便开发者选择特定元素而设计的(比如被鼠标所hover的元素ele :hover)，伪类往往能选择到具体的文档树元素。但伪元素选择的不是具体的文档树元素，更多的是一个独立于文档树的“抽象元素”，比如文本中的第一个字母(::first-letter)，文档元素的前置区域元素(::before)
7、应用
Ant-design 组件库中，通过为对应的示例块添加锚点来进行定位(ant.design/components/…)，当鼠标切到对应的锚点后，浏览器会出现对应的锚点链接#target-url，css 通过 ele:target 伪类来选择对应的元素，对为其添加样式。
.code-box:target {
border: 1px solid #1890ff;
}
参考：
