参考链接

W3: 伪元素和伪类

MDN: 伪类和伪元素

「前端面试题系列3」伪类与伪元素的区别及实战

CSS伪元素和伪类

CSS 引入了伪元素和伪类的概念，以允许基于文档树之外的信息进行格式化。

也就是说，伪元素和伪类都不会出现在文档源或文档树中，这就是 “伪” 。

定义理解

  • 伪类，选择器的一种，用于选择特定状态下的元素。

  • 伪元素，选择器的一种，用于创造不存在于 DOM 树中的虚拟元素然后选中，

它们可以像正常的 HTML 元素一样定义 CSS，但无法用 JS 获取。

定义对比

  • 伪类突出的是 “选择” 文档树中不存在的 “状态”，
    像 :hover, :active, :visited 等都在描述元素的一种状态，而这些状态是不存在于文档树中的，根据这些状态来选择并操作对应元素的 CSS 样式。

  • 伪元素突出的是 “创造” 文档树中不存在的 “元素”，
    像 ::before, ::after, ::first-letter 等都是创建了新的元素，而这些元素是不存在于文档树中的，通过伪元素来选择并操作对应的元素的 CSS 样式。

其他

  • CSS3 明确规定了，伪类用一个冒号(:)来表示，而伪元素则用两个冒号(::)来表示。但目前因为兼容性的问题，它们的写法可以是一致的，都用一个冒号(:)就可以了。

  • 选择器中的任何位置都允许使用伪类，
    而伪元素只能附加在选择器的最后一个简单选择器之后。

  • 伪元素和伪类名称不区分大小写。

个人补充

伪元素中的 ::first-line, ::first-letter 不是原本就存在于的吗？为什么不是伪类？

个人理解：::first-line, ::first-letter 中的内容确实是原本就存在的，但是它们是文本而不是标签，无法直接选中。

平时修改文本的字体样式等都是在修改标签，通过修改标签来修改里面的内容。

现在相当于是给这些元素创造了一个不存在于 DOM 树中的 “伪标签” ，并通过这个 “伪标签” 来选中并操作里面的内容。

自然，这个 “伪标签” 比外层真实标签距离内容更近，因此操作内容也是这个 “伪标签” 说话更有分量（测试案例可见 CSS 选择器权重）。

其实，::selection 也可以这么去理解，事实上，浏览器在选中文本时候默认就会出现的蓝底白字效果，可以理解成直接给对应的内容手动加了个 “伪标签”，点击其他地方时候，又手动取消了这个 “伪标签”。

（“伪标签” 只是为了方便我描述自己的理解而提出的名称，事实上并没有这个官方定义）

欢迎指正与指点！