为什么CSS中的::first-letter是伪元素而非伪类

很多人刚接触伪类和伪元素时，都会用“是不是匹配特定状态”作为唯一划分标准，其实这个标准从一开始就抓偏了两个概念的核心差异，才会对这两个选择器的归类产生疑惑。

两类选择器的核心划分边界 #

• 伪类的本质，是对已经存在于DOM渲染树中的真实元素，附加额外的状态/位置筛选条件，整个匹配过程不会在渲染树中新增任何节点。比如:hover、:nth-child(2)这类选择器，最终选中的都是完整的、原本就存在的元素，伪类只是给这些元素打了个“符合某类特征”的标记，不会拆分或者改造元素本身的内容结构。
• 伪元素的本质，是在真实元素的渲染层之上，凭空生成一个独立的、不存在于原始DOM结构里的虚拟节点。这个虚拟节点本身是可以参与独立排版、设置独立样式的内容块，不是给现有元素加个状态标记那么简单。

从实际渲染逻辑看::first-letter、::first-line的行为 #

不少人觉得这两个选择器只是“选中段落的首字、首行文字”，属于给内容加状态筛选，但从浏览器实际渲染的过程来看，这两个选择器的行为完全符合伪元素的特征：

• 当你给元素设置::first-line样式时，浏览器不会直接把样式作用在段落的某个真实文本节点上，而是会根据当前的排版宽度，把段落中最先排在第一行的文字单独抽离出来，封装成一个独立的虚拟块。这个块可以独立设置行高、字距、背景，甚至会随窗口宽度动态调整包含的文字范围，和段落剩下的内容是完全独立的样式作用对象。
• 当你给元素设置::first-letter样式时，被选中的首字会被单独封装成一个带浮动属性的虚拟块，不仅可以独立设置字号、字重，还能添加边框、内边距，甚至会影响后续文字的排版流。这种能独立参与排版流程的特性，根本不是“给真实文本加个状态标记”能实现的。

如果这两个选择器真的属于伪类，那它的行为应该和其他伪类一致：永远选中完整的真实元素，不会拆分元素内部的内容，给选择器加的样式也只会原样作用在被选中的真实内容上，不会触发独立的排版行为——但实际的渲染效果和这个预期差得非常远。

认知误区澄清 #

产生疑惑的核心原因，是把“匹配特定范围的内容”和“匹配真实元素的特定状态”两个行为搞混了。

只要记住一个判断标准就不会搞错：如果一个选择器匹配的结果，是能在渲染树里生成一个独立的、可独立排版的虚拟节点，那它就是伪元素；如果选择器只是给已经存在的真实元素加筛选条件，不生成任何新节点，那它就是伪类。

内容的提问来源于stack exchange，提问作者Aditya Singh