::first-letter 与 :first-child 有何不同（伪 class 与伪元素）

Question

来自W3C标准对伪元素的定义https://www.w3.org/TR/selectors-3/#pseudo-elements:

Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element’s content. Pseudo-elements allow authors to refer to this otherwise inaccessible information.

（我的重点。）

为什么文档语言允许检测第一个子元素（所以 :first-child 是一个 css 伪 class) 但 不是第一个字母的 （因此 ::first-letter 是一个 css 伪元素）？这个“文档语言”应该怎么理解？

本质上问题是：为什么选择第一个元素与选择第一个字母有区别？为什么文档语言可以检索到一个而不能检索另一个？

我不是要问伪 classes 和伪元素之间的一般区别，而是要具体问为什么第一个字母在概念上不同于第一个子元素。其他伪元素不那么令人困惑：例如 ::after 和 ::before 是伪元素是相当明显的，因为它们与未在 html 中定义的 "space" 相关结构体。但是第一个字母是，所以为什么这样的第一个字母仍然被区别对待的问题。

Answer 1

在最典型的 CSS 用例中，文档语言指的是 HTML。文档树（在整个选择器中提到）是指从标记构建的 DOM 树。

A pseudo-element 是根据现有布局生成的东西。也就是说，必须首先根据应用于 DOM 树中元素的 CSS 构建和呈现布局。这不能仅通过文档语言、标记来完成。

例如，您会注意到 ::first-letter pseudo-element 仅适用于方块容器。没有办法知道一个元素（或其后代）是否会有 ::first-letter pseudo-element 直到它被确定为块容器框（唯一一种可以直接包含内联内容流的框)，而这由 CSS 决定，而不是由 HTML 决定。举个更具体的例子：

<p>Hello world!

默认情况下，p 元素是 display: block。这导致了一个块盒，它是一种块容器盒。但即便如此，这个默认值是使用 CSS 实现的。如果您要使用以下 CSS 规则覆盖该默认值：

p {
  display: inline;
}

此元素将成为行内框，p::first-letter将不再对其产生任何影响。

直觉上，与块框（或任何其他类型的框）相比，确定内联框的第一个字母似乎微不足道，但一旦您有多个内联格式相同的内联框，事情就会变得相当复杂context 都在相互作用。

::first-line 远不止 clear-cut：不仅不可能知道元素文本的第一个格式化行有多长，直到您 format该行，但该行的内容和长度也可以 在您调整大小时更改 and/or 重排元素及其内容。

相比之下，tree-structural pseudo-class 例如 :first-child 匹配布局中 DOM 独立中的元素。无需渲染任何内容，浏览器可以立即判断哪个元素是其 parent 的第一个 child。您所需要的只是 DOM 元素树，这意味着您需要的所有信息都可以从文档语言、标记中检索到。例如，以下片段中 ol 的第一个 child 总是相同的 无论您对其应用什么 CSS:

<ol>
  <li>First
  <li>Second
  <li>Third
</ol>

::first-letter 与 :first-child 有何不同（伪 class 与伪元素）

How is ::first-letter different from :first-child (pseudo-class vs pseudo-element)

css

css-selectors

standards

w3c