CSS 伪元素模块第 4 级

1. 引言

本节是资料性的。

伪元素代表文档中除了文档语言显式创建的元素之外的抽象元素。由于它们不限于融入文档树，因此可用于选择和设置文档中不一定映射到文档树结构的各个部分。例如，::first-line 伪元素可以在文本换行之后选择元素首个格式化行上的内容，从而允许该行以不同于段落其余部分的方式设置样式。

每个伪元素都与一个源元素相关联，且具有 ::name-of-pseudo 形式的语法。本模块定义了 CSS 中存在的伪元素以及如何设置它们的样式。有关伪元素的一般信息及其语法和与其他选择器的交互，请参阅 [SELECTORS-4]。

注： 提醒一下，除非显式允许，否则伪元素不能链式连接。例如，不允许使用 ::marker::before；但允许使用 ::before::marker。

2. 排版伪元素

2.1. 首行文本：::first-line 伪元素

::first-line 伪元素代表其源元素的首个格式化行的内容。

p::first-line { text-transform: uppercase }

注： 请注意，首行的长度取决于多种因素，包括页面的宽度、字体大小等。

<P>This is a somewhat long HTML paragraph
that will be broken into several lines.
The first line will be styled
by the ‘::first-line’ pseudo-element.
The other lines will be treated
as ordinary lines in the paragraph.</P>

THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT
will be broken into several lines. The first
line will be styled by the ‘::first-line’
pseudo-element. The other lines will be 
treated as ordinary lines in the paragraph.

THIS IS A SOMEWHAT LONG
HTML paragraph that will
be broken into several
lines. The first line will
be styled by the
‘::first-line’ pseudo-
element. The other lines
will be treated as ordinary
lines in the paragraph.

2.1.1. 查找首个格式化行

在 CSS 中，::first-line 伪元素仅在附加到块容器时才能产生效果

• 建立内联格式化上下文的块容器的首个格式化行代表其第一个行框的内联级内容。

• 包含块级内容（且不是表格包装盒）的块容器或多列容器的首个格式化行是其第一个流内块级子元素的首个格式化行。如果不存在这样的行，则它没有首个格式化行。

注： 首个格式化行可以是空行。例如，在 <p><br>First… 中，p 的第一行不包含任何字母。因此，“First”一词不在首个格式化行上，不受 p::first-line 的影响。

注： 本身不参与块格式化上下文的块容器的第一行不能是祖先元素的首个格式化行。因此，在 <DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV> 中，DIV 的首个格式化行不是“Hello”那一行，而是包含整个内联块的那一行。

当一个首个格式化行由多个 ::first-line 伪元素代表时，它们按照其源元素的相同顺序嵌套。该行的内联级内容——包括其根内联盒片段——嵌套在最内层的 ::first-line 伪元素中。

<DIV>
  <P>First paragraph</P>
  <P>Second paragraph</P>
</DIV>

<DIV>
  <P><DIV::first-line><P::first-line>First paragraph</P::first-line></DIV::first-line></P>
  <P><P::first-line>Second paragraph</P::first-line></P>
</DIV>

2.1.2. 设置 ::first-line 伪元素的样式

::first-line 伪元素生成的盒行为类似于内联级盒，但有一定的限制。以下 CSS 属性适用于 ::first-line 伪元素

• 所有字体属性（参见 [CSS-FONTS-4]）
• color 和 opacity 属性（参见 [CSS-COLOR-4]）
• 所有背景属性（参见 [CSS-BACKGROUNDS-3]）
• 任何适用于内联元素的排版属性（参见 [CSS-TEXT-4]）
• 所有文本装饰属性（参见 [CSS-TEXT-DECOR-4]）
• ruby-position 属性（参见 [CSS-RUBY-1]）
• 任何适用于内联元素的内联布局属性（参见 [CSS-INLINE-3]）
• 由各自规范定义为适用于 ::first-line 的任何其他属性

用户代理也可以应用其他属性，但以下排除的属性除外

• writing-mode
• direction
• text-orientation

注： 在 ::first-line 上设置 line-height 会继承到包装首行内容的根内联盒片段，因此既可以增加也可以减少首行框的高度。

2.1.3. 继承与 ::first-line 伪元素

在 CSS 继承期间，出现在首行的子元素片段从 ::first-line 伪元素继承任何标准继承属性（上面排除的属性除外）。对于所有其他属性，包括所有自定义属性 [CSS-VARIABLES-1]，继承自非伪类父元素。（不出现在首行的子元素部分始终从非伪类父元素继承。）

<P><p::first-line>This is a somewhat long HTML paragraph
that</p::first-line> will be broken into several lines.
The first line will be styled
by the ‘::first-line’ pseudo-element.
The other lines will be treated
as ordinary lines in the paragraph.</p>

<p><p::first-line>This is a somewhat long</p::first-line> HTML paragraph
that will be broken into several lines.
The first line will be styled
by the ‘::first-line’ pseudo-element.
The other lines will be treated
as ordinary lines in the paragraph.</p>

<p><span>This is a somewhat long HTML paragraph
that will be broken into several lines.</span>
The first line will be styled
by the ‘::first-line’ pseudo-element.
The other lines will be treated
as ordinary lines in the paragraph.</p>

<p><p::first-line><span>This is a somewhat long HTML paragraph
that</span></p::first-line><span> will be broken into several lines.</span>
The first line will be styled
by the ‘::first-line’ pseudo-element.
The other lines will be treated
as ordinary lines in the paragraph.</p>

2.2. 首字母文本：::first-letter 伪元素及其 ::prefix 和 ::suffix 子元素

::first-letter 伪元素代表其源元素的首个格式化行上的第一个字母、数字或符号（Unicode 类别 L*、N* 或 S*）排版字符单元（即首字母）及其关联的标点符号。统称这些文本为首字母文本。::first-letter 伪元素可用于创建“首字母大写”和“首字下沉”，这些都是常见的排版效果。

h2 + p::first-letter { initial-letter: 3; }

注： 首字母实际上可能是一个数字，例如“67 million dollars is a lot of money”中的“6”。

为了允许对首字母本身及其相邻标点符号进行独立样式设置，关联的前置标点由 ::first-letter 伪元素的 ::prefix 子伪元素代表（::first-letter::prefix）；而关联的后置标点由 ::first-letter 伪元素的 ::suffix 子伪元素代表（::first-letter::suffix）。请参阅下文 § 2.2.1 首字母及关联标点。

2.2.1. 首字母及关联标点

如 CSS Text 3 § 1.4 字符与字母中所述，一个排版字符单元可以包含多个 Unicode 码位。例如，组合字符必须与其基准字符保持在一起。此外，语言可能对于如何处理某些字母组合有额外的规则。例如在荷兰语中，如果字母组合 "ij" 出现在元素的开头，则两个字母都应被视为处于 ::first-letter 伪元素之内。[UAX29] 在选择首字母时，UA 应调整其排版字符单元的定义，以反映 ::first-letter 伪元素的包含块的内容语言的首字母传统。

前置和后置标点也必须包含在 ::first-letter 伪元素的首字母文本中，具体如下

• 所有标点符号——即属于标点符号 (P*) Unicode 通用类别 [UAX44] 的字符——这些字符位于首字母之前，以及任何中间的排版空格——属于 Zs Unicode 通用类别 [UAX44] 除 U+3000 IDEOGRAPHIC SPACE 之外的字符。
• 除了开启标点和连接号之外的任何标点符号——即属于标点符号 (P*) Unicode 通用类别的字符，但不包括开启标点 (Ps) 和连接标点 (Pd) ——这些字符位于首字母之后，以及任何中间的排版空格——属于 Zs Unicode 通用类别 [UAX44] 除 U+3000 IDEOGRAPHIC SPACE 或单词分隔符之外的字符。

有关排版字符单元及其 Unicode 属性的更多信息，请参阅 CSS Text 3 § 1.4 字符与字母和 CSS Text 3 § E 字符与属性。[CSS-TEXT-3]

2.2.2. 查找首字母文本

与 ::first-line 一样，::first-letter 伪元素仅在附加到块容器时才能产生效果。其首字母文本是参与其源元素的首个格式化行的内联格式化上下文中的第一个此类内联级内容，前提是该行上没有先于它的任何其他流内内容（如图像或内联表格）。

为此，任何标记盒都会被忽略，就像它们是流外的一样。但是，如果一个元素具有流内 ::before 或 ::after 内容，则会从包含该生成内容的元素内容中选择首字母文本。

如果不存在符合条件的文本，则没有首字母文本，也没有 ::first-letter 伪元素。

注： 当首个格式化行为空时，::first-letter 不会匹配任何内容。例如，在 HTML 片段 <p><br>First... 中，第一行不包含任何字母，因此 ::first-letter 不匹配任何内容。特别是，它不匹配位于第二行的 "First" 中的 "F"。

注： 与 ::first-line 一样，不参与块格式化上下文的块容器的首字母文本不能是祖先元素的首字母文本。因此，在 <DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV> 中，DIV 的首字母不是 "H"。实际上，该 DIV 没有首字母。

首字母文本中被换行到下一行的任何部分都不再属于 ::first-letter 伪元素的一部分。

2.2.3. 首字母伪元素的继承与盒树结构

::first-letter 伪元素紧紧包裹在它所代表的首字母文本周围，即使该文本位于后代元素中。当首字母文本由多个 ::first-letter 伪元素代表时，它们按照其源元素的相同顺序嵌套。继承的行为依此类推。

<div>
  <p><span>The first few words</span>
  and the rest of the paragraph.
</div>

<div>
  <p><span><div::first-letter><p::first-letter>T</…></…>he first few words</span>
  and the rest of the paragraph.
</div>

如果存在任何 ::first-letter::prefix 或 ::first-letter::suffix 伪元素，它们将嵌套在最内层的 ::first-letter 中，除此之外其解释类似于 ::first-letter 本身。

<div>
  <p><span>“The first few words</span>
  and the rest of the quotation.
</div>

<div>
  <p><span><div::first-letter><p::first-letter><div::first-letter::prefix><p::first-letter::prefix>“</…></…>T</…></…>he first few words</span>
  and the rest of the paragraph.
</div>

如果构成首字母文本的字符并不都在同一个元素中（如 <p>‘<em>T... 中的 ‘T），用户代理可以从其中一个元素、或所有元素中创建 ::first-letter 伪元素（及其 ::prefix 或 ::suffix 子元素，如果有的话），或者干脆不创建伪元素。此外，如果首字母文本不在行首（例如由于双向重排序，或者由于具有 list-style-position: inside 的列表项标记），则不要求用户代理创建伪元素。

::first-letter 伪元素包含在任何 ::first-line 伪元素中，因此（可能间接地）继承自 ::first-line，就像同一行上的任何内联盒一样。

2.2.4. 设置首字母伪元素的样式

在 CSS 中，::first-letter 伪元素（及其 ::prefix 和 ::suffix 子元素）类似于内联盒。以下属性适用于 ::first-letter、::first-letter::prefix 和 ::first-letter::suffix 伪元素

• 所有字体属性（参见 [CSS-FONTS-4]）
• color 和 opacity 属性（参见 [CSS-COLOR-4]）
• 所有背景属性（参见 [CSS-BACKGROUNDS-4]）
• 任何适用于内联元素的排版属性（参见 [CSS-TEXT-4]）
• 所有文本装饰属性（参见 [CSS-TEXT-DECOR-4]）
• 任何适用于内联元素的内联布局属性（参见 [CSS-INLINE-3]）
• 外边距（margin）和内边距（padding）属性（参见 [CSS22]）
• 边框（border）属性和 box-shadow（参见 [CSS-BACKGROUNDS-4]）
• 由各自规范定义为适用于 ::first-letter 的任何其他属性

用户代理也可以应用其他属性。但是，在任何情况下，将此类未列出的属性应用于 ::first-letter 都不得更改该 ::first-letter 所代表的首字母文本内容。

注： 在以前的 CSS 版本中，允许用户代理根据字母形状选择行高、宽度和高度，以接近字体大小；并在执行布局时考虑字形轮廓。此类定义松散的“魔法”已被有意移除，因为它被证明是预期用例（首字下沉和抬高首字母）的一个糟糕解决方案，且会导致互操作性问题。有关显式处理首字下沉和抬高首字母的方法，请参阅 [CSS-INLINE-3] 中的 initial-letter。

3. 高亮伪元素

3.1. 选择高亮内容：::selection、::search-text、::target-text、::spelling-error、::grammar-error 以及 ::highlight() 伪元素

高亮伪元素代表文档中被赋予特定状态的部分，通常会以不同的样式呈现，以向用户指示该状态。例如，文档的选择部分通常会被高亮显示（赋予交替的背景色和前景色，或色彩洗刷效果）以指示其被选中状态。定义了以下高亮伪元素：

::selection

::selection 伪元素代表文档中被选为某些未来用户代理操作目标或对象的部分。例如，它适用于可编辑文本字段中被选中的文本，这些文本将通过复制操作被复制或通过粘贴操作被替换。

测试

• active-selection-001-manual.html (手动测试) (源码)
• active-selection-002-manual.html (手动测试) (源码)
• active-selection-004-manual.html (手动测试) (源码)
• active-selection-011.html (在线测试) (源码)
• active-selection-012.html (在线测试) (源码)
• active-selection-014.html (在线测试) (源码)
• active-selection-016.html (在线测试) (源码)
• active-selection-018.html (在线测试) (源码)
• active-selection-025.html (在线测试) (源码)
• active-selection-027.html (在线测试) (源码)
• active-selection-056.html (在线测试) (源码)
• active-selection-057.html (在线测试) (源码)
• active-selection-063.html (在线测试) (源码)
• selection-background-color-001.html (在线测试) (源码)
• selection-link-001.html (在线测试) (源码)
• selection-link-002.html (在线测试) (源码)
• selection-link-003.html (在线测试) (源码)
• selection-over-highlight-001.html (在线测试) (源码)
• selection-universal-shadow-dom.html (在线测试) (源码)
• selection-contenteditable-011.html (在线测试) (源码)
• selection-input-011.html (在线测试) (源码)
• selection-textarea-011.html (在线测试) (源码)
• textpath-selection-011.html (在线测试) (源码)

::search-text

::search-text 伪元素代表由用户代理的页内查找功能识别的文本。由于并非所有 UA 都会以可以用高亮伪元素表达的方式来设置匹配文本的样式，因此该伪元素是可选实现的。

:current 伪类（但不包括 ::current()）可以与 ::search-text 结合使用，以代表当前获得焦点的匹配实例。:past 和 :future 伪类被保留用于未来类似的用途。任何这些伪类与 ::search-text 的不支持组合必须被视为无效。

::target-text

::target-text 伪元素代表由文档 URL 的片段（如果有的话）直接定位的文本。

注：当 URL 片段定位到一个元素时，可以使用 :target 伪元素来选择它，但 ::target-text 不会匹配任何内容。它只匹配文本本身被 [片段] 定位的情况。

测试

• target-text-001.html (在线测试) (源码)
• target-text-002.html (在线测试) (源码)
• target-text-003.html (在线测试) (源码)
• target-text-004.html (在线测试) (源码)
• target-text-005.html (在线测试) (源码)
• target-text-006.html (在线测试) (源码)
• target-text-007.html (在线测试) (源码)
• target-text-008.html (在线测试) (源码)
• target-text-009.html (在线测试) (源码)
• target-text-010.html (在线测试) (源码)
• target-text-dynamic-001.html (在线测试) (源码)
• target-text-dynamic-002.html (在线测试) (源码)
• target-text-dynamic-003.html (在线测试) (源码)
• target-text-dynamic-004.html (在线测试) (源码)
• target-text-shadow-horizontal.html (在线测试) (源码)
• target-text-shadow-vertical.html (在线测试) (源码)
• target-text-text-decoration-001.html (在线测试) (源码)

::spelling-error

::spelling-error 伪元素代表被用户代理标记为拼写错误的一段文本。

测试

• spelling-error-001.html (在线测试) (源码)
• spelling-error-002-manual.html (手动测试) (源码)
• spelling-error-003-manual.html (手动测试) (源码)
• spelling-error-004-crash.html (在线测试) (源码)
• spelling-error-005-crash.html (在线测试) (源码)
• spelling-error-006.html (在线测试) (源码)

::grammar-error

::grammar-error 伪元素代表被用户代理标记为语法错误的一段文本。

测试

• grammar-error-001.html (在线测试) (源码)
• grammar-error-002-manual.html (手动测试) (源码)
• grammar-error-003-manual.html (手动测试) (源码)

::highlight(<custom-ident>)

::highlight() 函数式伪元素代表与给定自定义高亮名称标识的自定义高亮关联的文档部分。参数 <custom-ident> 是必需的。详情请参阅 [CSS-HIGHLIGHT-API-1]。

高亮伪元素不一定符合元素树结构，可以任意跨越元素边界，而不必遵守其嵌套结构。

3.2. 设置高亮样式

高亮伪元素只能由一组有限的属性设置样式，这些属性不会影响布局，并且可以在高度动态的环境中高效应用——此外（为确保互操作性），它们在所需区域内的渲染不依赖于（由 UA 确定的）高亮叠加层的精确边界。

以下属性适用于高亮伪元素：

• color
  测试

  • active-selection-001-manual.html (手动测试) (源码)
  • active-selection-011.html (在线测试) (源码)
  • active-selection-016.html (在线测试) (源码)
  • active-selection-018.html (在线测试) (源码)
• background-color
  测试

  • active-selection-002-manual.html (手动测试) (源码)
  • active-selection-012.html (在线测试) (源码)
  • active-selection-031.html (在线测试) (源码)
• text-decoration 及其相关属性（包括 text-underline-position 和 text-underline-offset）
  测试

  • active-selection-004-manual.html (手动测试) (源码)
  • active-selection-014.html (在线测试) (源码)
  • active-selection-021.html (在线测试) (源码)
  • grammar-error-001.html (在线测试) (源码)
  • grammar-error-002-manual.html (手动测试) (源码)
  • grammar-error-003-manual.html (手动测试) (源码)
  • spelling-error-001.html (在线测试) (源码)
  • spelling-error-002-manual.html (手动测试) (源码)
  • spelling-error-003-manual.html (手动测试) (源码)
• text-shadow
  测试

  • marker-text-shadow.html (在线测试) (源码)
• stroke-color、fill-color 和 stroke-width
  测试

  • textpath-selection-011.html (在线测试) (源码)
• 自定义属性 [CSS-VARIABLES-1]

这里是否还应包含其他属性？

注：从历史上看（以及在编写本文时），只有 color 和 background-color 得到了互操作性的支持。

注：color 属性设置文本以及由源元素及其祖先和后代应用于文本的所有行装饰（下划线、上划线、贯穿线）和强调标记（text-emphasis）的颜色。

对于未在上方列出但解析适用属性的值所必需的任何属性，它们的计算值是从源元素的计算值中复制而来的，忽略在高亮伪元素本身上指定的任何值。例如：

• forced-color-adjust（在强制颜色模式中用于解析颜色）和 color-scheme（用于解析 <system-color> 值）
• font-size、font-family 等（用于解析 em 和其他字体相对长度）。
• line-height（用于解析 lh 单位）
• 自定义属性 [CSS-VARIABLES-1]（用于 var() 替换）

如果对于给定的高亮伪元素，在作者源中指定了颜色，则必须按指定尊重这些颜色；即 UA 不得应用任何额外处理（例如使用半透明洗刷效果）。但是，如果作者源中没有颜色，则 UA 可以应用额外的颜色处理。

注：这是为了确保在解释给定作者样式表的所有用户代理中都能保持颜色对比度。

供应商前缀属性（如 -webkit-text-fill-color）不适用于高亮伪元素。

3.3. 默认 UA 样式

建议在默认 UA 样式表中添加以下内容：

/* Represent default spelling/grammar error styling in an adjustable way */
:root::spelling-error { text-decoration: spelling-error; }
:root::grammar-error  { text-decoration: grammar-error; }

一些高亮伪元素应该具有成对的默认高亮颜色——由 UA 提供的默认 color 和 background-color，它们要么一起被使用，要么一起被覆盖，请参见 § 3.3.1 成对默认值。对于 ::selection，它们应对应于 HighlightText 和 Highlight，而对于 ::target-text，它们应对应于 MarkText 和 Mark。

UA 可以应用额外的效果来增强高亮内容的呈现，例如使高亮文本以外的内容变暗，或根据用户交互或时间淡出高亮样式。这些不受 CSS 控制。

关于 UA 以受 CSS 控制的方式对高亮呈现进行微调，目前正在 Issue 6853 中进行讨论。

3.3.1. 成对默认值

出于兼容性原因，只有当 color 和 background-color 都没有从作者源获得级联值（或从作者源继承其值）时，才必须使用成对的默认高亮颜色。当高亮颜色为 revert 或 revert-layer 时，回滚级联之后的源决定了级联值的源。

注：由于此规则是出于兼容性原因，因此它不适用于其他类似属性，如 fill-color 或 stroke-color。

<p>Highlight this <em>and this</em>.</p>

em::selection { color: initial; }
em::selection { color: inherit; }
em::selection { color: unset; }
em::selection { color: green; }
p::selection { color: green; }

3.4. 高亮区域

对于每种类型的高亮（参见 § 3.1 选择高亮内容：::selection、::search-text、::target-text、::spelling-error、::grammar-error 和 ::highlight() 伪元素），整个文档都存在一个唯一的高亮叠加层，其活动部分由相应的高亮伪元素表示。每个盒子拥有叠加层中与其直接包含的任何文本或替换内容相对应的部分。

• 对于文本，相应的叠加层必须至少覆盖整个 em 框，并可以向上/向下扩展至行框边缘。两个字符之间的间距也可以是叠加层区域的一部分，在这种情况下，它属于包含这两个字符且在两个字符都被选中时也被选中的最内层元素。
  测试

  • selection-intercharacter-011.html (在线测试) (源码)
  • selection-intercharacter-012.html (在线测试) (源码)
• 对于替换内容，关联的叠加层必须至少覆盖整个替换对象，并可以向外扩展以包括元素的整个内容框。
  测试

  • active-selection-043.html (在线测试) (源码)
• 叠加层还可以包括元素边框盒内的其他区域；在这种情况下，这些区域属于包含该区域的最内层元素。
• 对于行内级盒子，叠加层可以在块轴方向上扩展到其边框边缘之外，直到其行框边缘。

请参阅 F2F 会议纪要、dbaron 的邮件、Daniel 的讨论串、Gecko 注释、Opera 注释、Webkit 注释

不确定这是否是描述事物运作方式的正确方式。

3.5. 级联和每元素高亮样式

每个元素绘制其自身在高亮叠加层中的活动部分，这些部分接收由相应高亮伪元素样式指定的样式，而该元素即为这些样式的源元素。当多种样式发生冲突时，通过级联来确定最终胜出的样式。

当级联未给任何受支持属性赋予值，或者赋予的值为 inherit 或 unset 时，其指定值通过从其源元素的父元素的相应高亮伪元素继承来确定。无论该属性是否为继承属性，都会发生这种情况。

此外，对于源自根元素的高亮伪元素，color 的继承值为 currentColor，而不是初始值。

所有自定义属性都从源元素继承，无论该属性是否为注册为可继承的自定义属性。

p::selection      { color: yellow; background: green; }
p > em::selection { color: orange; }
em::selection     { color:    red; }

<p>Highlight this <em>and this</em>.</p>

希望使用多种选择样式的作者应该对他们的文档级选择样式使用 :root::selection，因为这将允许在后代中进行清晰的覆盖。单独的 ::selection 适用于树中的每个元素，会覆盖任何祖先的更具体样式。

::selection          { background: blue; }
p.warning::selection { background:  red; }

<p class="warning">Some <strong>very important information</strong></p>

:root::selection     { background: blue; }
p.warning::selection { background:  red; }

以下示例演示了自定义属性的继承。

:root {
   --background-color: green;
   --decoration-thickness: 10px;
   --decoration-color: purple;
 }
 ::selection {
   --decoration-thickness: 1px;
   --decoration-color: green;
 }
 div::selection {
   --decoration-color: blue;
   background-color: var(--background-color, red);
   text-decoration-line: underline;
   text-decoration-style: line;
   text-decoration-thickness: var(--decoration-thickness, 5px);
   text-decoration-color: var(--decoration-color, red);
 }

注：这种行为允许以与预先存在的实现兼容的方式，使用自定义属性来控制选择。

3.6. 绘制高亮

3.6.1. 背景

每个高亮伪元素在相应部分的高亮叠加层上绘制其背景，在任何定位后代之下（即在 CSS2.2 § E.2 中的步骤 8 之前）进行绘制。::selection 叠加层绘制在 ::target-text 叠加层之上，后者又绘制在 ::spelling-error 叠加层之上，再其后是 ::grammar-error 叠加层，最后是 ::highlight 叠加层。::search-text 叠加层根据 UA 的不同直接绘制在 :selection 叠加层之上或之下，并绘制在所有其他叠加层之上。

3.6.2. 阴影

应用于高亮伪元素的任何 text-shadow 都会绘制在相应的高亮叠加层背景之上。此类文本阴影也会相互叠加（并叠加在应用于文本及其装饰的任何原始 text-shadow 之上，该阴影将继续适用）。

注：由于每个高亮叠加层背景都绘制在属于下方层的任何阴影之上，因此高亮叠加层背景可能会遮挡低层级的阴影。

3.6.3. 文本和文本装饰

高亮伪元素会抑制任何关联文本的正常绘制，以及应用于该文本的文本装饰（阴影除外）。相反，最顶层的活动高亮叠加层使用该高亮自身的 color，在所有高亮叠加层背景上重新绘制该文本（及这些装饰）。

注：这意味着与阴影不同，行装饰和强调标记不会被为关联文本绘制的任何高亮叠加层背景所遮挡。

为此，高亮伪元素的 color 属性上的 currentColor 代表下方下一个活动高亮伪元素层的颜色，最终回退到原本会使用的颜色（由源元素或中间的伪元素如 ::first-line 或 ::first-letter 应用的颜色）。

注：因此，当伪元素的 color 不是 currentColor 时，元素自身的文本装饰（行装饰和强调标记）将以伪元素自身的颜色绘制，而不管其原始颜色或填充规范如何。

由每个高亮伪元素引入的任何文本装饰都以与其背景相同的顺序堆叠在文本的原始装饰之上，并全部被绘制，每种装饰都使用其自身的颜色。应用正常的绘制顺序，因此根据 CSS2 附录 E，所有下划线都绘制在顶划线之下，顶划线绘制在文本之下，文本绘制在任何贯穿线之下。然而，由 ::selection 应用的文本装饰可以改为与文本一起作为位于所有其他装饰之上的最顶层的一组层来绘制。

由高亮伪元素引入的行装饰仅适用于与其源元素关联的文本，并且除了通过属性继承（如上文所述）之外，不会传播到后代。

注：与源元素自身的装饰不同，在高亮伪元素上声明的装饰会传播到流外元素和行内块，其厚度和位置在后代之间各不相同。

3.6.4. 替换元素

对于非替换内容，UA 必须按照指定尊重 color 和 background-color（包括它们的 Alpha 通道）。但是，对于替换内容，UA 应该创建一个半透明的洗刷层来覆盖内容，以便内容可以透出。如果指定的 background-color 不是 transparent，则此洗刷层应采用指定的颜色，否则采用指定的 color；但是 UA 可以调整 Alpha 通道。

3.7. 高亮显示的安全性考虑

因为拼写和语法错误的样式可能会泄露有关用户词典内容的信息（其中可能包含用户的姓名，甚至包含其地址簿的内容！），实现 ::spelling-error 和 ::grammar-error 的 UA 必须防止页面能够读取此类高亮片段的样式。

4. 遵守树结构的伪元素

遵守树结构的伪元素始终符合盒子树结构。它们从其源元素继承任何可继承属性；非继承属性照常取其初始值。[CSS-CASCADE-4] 其中一个子集是完全可设置样式的伪元素；所有适用于真实元素的属性也适用于完全可设置样式的伪元素。

4.1. 生成内容伪元素：::before 和 ::after

当它们的计算 content 值不是 none 时，这些伪元素会生成盒子，就好像它们是其源元素的直接子元素一样，其内容由 content 指定。

::before

代表紧接在源元素实际内容之前的可设置样式的子伪元素。

::after

代表紧接在源元素实际内容之后的可设置样式的子伪元素。

::before 和 ::after 都是完全可设置样式的伪元素：对哪些属性适用于它们没有限制。

p.note::before { content: "Note: " }

与常规元素的内容一样，::before 和 :after 伪元素的生成内容可以构成应用于其源元素的任何 ::first-line 和 ::first-letter 伪元素的一部分。同样，与常规子元素一样，当它们的父元素（即源元素）被替换时，::before 和 ::after 伪元素会被抑制。

4.2. 列表标记：::marker 伪元素

::marker 伪元素代表列表项自动生成的标记盒。（参见 [CSS-DISPLAY-3] 和 [CSS-LISTS-3]。）

::marker 的内容在被 ::first-letter 处理时会被忽略（不选中）。

::marker 与 ::first-line 的交互目前正在 Issue 4506 中讨论。

::marker 是一个树结构伪元素，但并非完全可设置样式的；只有有限的一组属性可以用于 ::marker 伪元素。此列表定义在 CSS Lists 3 § 3.1.1 适用于 ::marker 的属性中。

::before::marker 或 ::after::marker 选择器是有效的，可用于表示恰好是列表项的 ::before 或 ::after 伪元素的标记框。然而 ::marker::marker 是无效的，并且 ::marker 上的 display 计算值总是会失去任何 list-item 方面的特性。

::marker 是否也应该具有 ::prefix 和 ::suffix 子元素？

4.3. 占位符输入：::placeholder 伪元素

::placeholder 伪元素表示输入字段中的占位符文本：即表示输入并为用户如何填写表单提供提示的文本。例如，日期输入字段可能具有占位符文本“YYYY/MM/DD”，以说明应按年-月-日的顺序输入数字日期。它是一个树结构伪元素。

注意：还存在一个 :placeholder-shown 伪类，它适用于显示占位符文本时的（真实）元素，并可用于对这些元素进行特殊样式设置。::placeholder 特指占位符文本本身，因此其能力相对有限。

所有适用于 ::first-line 伪元素的属性也适用于 ::placeholder 伪元素，但 [CSS-INLINE-3] 中定义的属性除外。

在交互式媒体中，一旦用户输入内容，占位符文本通常会被隐藏；然而这并非强制要求，输入值和占位符文本也可以同时可见。确切的行为由 UA（用户代理）定义。请注意，在静态媒体（如打印件）中，即使在用户输入之后，占位符文本仍会存在。

作者们似乎希望将 text-align 加入支持的属性列表中。参见例如 此处的评论。

注意：有建议提出 ::placeholder 还可以引用在元素树中具有相应元素的占位符。目前尚不清楚这应该如何运作，但可能值得一做。参见 Issue 2417。

5. 元素支持的伪元素

元素支持的伪元素与大多数 CSS 和其他平台功能的交互方式就如同它们是真实元素一样（事实上，它们通常确实是无法以其他方式选中的真实元素）。

元素支持的伪元素始终是树结构化的。除非另有说明，它们是完全可设置样式的，并继承自其源元素，就像标准的树结构伪元素一样；但它们也可以被定义为继承自另一个元素。（例如，::part() 继承自它在 Shadow Tree 中所代表元素的父元素。）

所有伪类和伪元素在语法上都允许出现在元素支持的伪元素之后（例如 x-button::part(label):hover 或 x-button::part(label)::before），就像该伪元素是一个类型选择器一样；但有些伪类被禁止匹配。

• 结构伪类、:has() 伪类、:scope 伪类以及 :host/:host()/:host-context() 伪类永远不会匹配。

• ::part() 永远不会匹配。（然而，其他元素支持的伪元素可以匹配。）

一个元素支持的伪元素可以将其自身定义为代表一个真实元素（可能是当前树中无法访问的元素）。如果它这样做，所有未被禁止的伪类和伪元素（见上文）将像在该真实元素上一样匹配。如果它不这样做，它必须定义它在何时匹配哪些伪类；然而，除非另有说明，任何允许在树结构伪元素上使用的伪类始终允许在元素支持的伪元素上使用。

5.1. 文件选择按钮：::file-selector-button 伪元素

::file-selector-button 伪元素的目标是 type=file 的 <input> 元素内部的 <button>（如果 UA 渲染了此类按钮）。

对于哪些属性适用于 ::file-selector-button 伪元素没有限制。

::file-selector-button { border: 3px solid green }

5.2. details 元素的可展开内容：::details-content 伪元素

::details-content 伪元素的目标是 details 元素中可以展开或折叠的附加信息。它是一个元素支持的伪元素。

对于哪些属性适用于 ::details-content 伪元素没有限制。

details::details-content {
  opacity: 0;
  transition: content-visibility 300ms allow-discrete, opacity 300ms;
}

details[open]::details-content {
  opacity: 1;
}

6. 重叠伪元素的交互

<style>
p { color: red; font-size: 12pt }
p::first-letter { color: green; font-size: 200% }
p::first-line { color: blue }
</style>

<p>Some text that ends up on two lines</p>

<p>
  <p::first-line>
    <p::first-letter>
      S
    </p::first-letter>
    ome text that
  </p::first-line>
  ends up on two lines
</p>

7. 对 CSS 对象模型的补充

7.1. CSSPseudoElement 接口

CSSPseudoElement 接口允许伪元素成为事件目标。

[Exposed=Window]
interface CSSPseudoElement : EventTarget {
    readonly attribute CSSOMString type;
    readonly attribute Element element;
    readonly attribute (Element or CSSPseudoElement) parent;
    CSSPseudoElement? pseudo(CSSOMString type);
};

该接口正处于设计开发阶段，本草案更多的是寻求反馈而非实现。CSSWG 特别希望听取有关用例和问题的意见。

type 属性是代表伪元素类型的字符串。这可以是以下值之一：

"::before"

代表 ::before 伪元素。

"::after"

代表 ::after 伪元素。

"::marker"

代表 ::marker 伪元素。

element 属性是该伪元素的最终源元素。

parent 属性是该伪元素的源元素。对于大多数伪元素，parent 和 element 将返回相同的 Element；对于子伪元素，parent 将返回一个 CSSPseudoElement，而 element 则返回一个 Element。

pseudo(type) 方法返回代表其参数中所引用的子伪元素的 CSSPseudoElement 接口（如果此类子伪元素可能存在且有效），否则返回 null。参见下文的 pseudo()。

注意：该接口将来可能会扩展到其他伪元素类型，和/或允许通过 CSSStyleDeclaration style 属性设置样式信息。目前的功能仅限于支持 [web-animations-1] 所需的功能。

7.2. Element 接口的 pseudo() 方法

Element 接口增加了一个新方法，用于检索由给定元素为给定类型创建的伪元素：

partial interface Element {
  CSSPseudoElement? pseudo(CSSOMString type);
};

代表同一源元素上同一伪元素的返回值，只要是可观察到的，必须始终是同一个 CSSPseudoElement 对象。（为了方便或提高性能，如果这是不可观察的，UA 可能会丢弃或重新生成该对象。）

pseudo() 方法返回值的同一性、生命周期和 null 性（以及潜在的错误情况）仍在讨论中。参见 Issue 3607 和 Issue 3603。

7.3. getComputedStyle()

当第二个参数 pseudoElt 指向一个高亮伪元素时，getComputedStyle() 返回的样式就如同该高亮处于激活状态，而所有其他高亮处于非激活状态。这避免了返回结果依赖于实际高亮状态所带来的潜在歧义和隐私风险。

8. 兼容性语法

为了与针对 CSS Level 2 [CSS2] 编写的现有样式表兼容，用户代理还必须接受以前的单冒号表示法（:before、:after、:first-letter、:first-line），用于表示 ::before、::after、::first-letter 和 ::first-line 伪元素。

安全性考虑

关于高亮显示，参见 § 3.7 高亮显示的安全性考虑。

隐私性考虑

尚未针对本模块提出新的隐私考虑。

变更 (Changes)

自 2022 年 12 月 30 日工作草案以来的重大变化包括：

• 定义了元素支持的伪元素和完全可设置样式的伪元素这两个术语。（Issue 10199, Issue 10083）
• 重新设计了高亮伪元素的属性（及自定义属性）应用和继承模型。（Issues 7591, 7580, 6641, 11317）
• 定义了 ::highlight() 并改进了对 [CSS-HIGHLIGHT-API-1] 的交叉引用。（Issue 6755）
• 增加了 ::search-text 作为新的高亮伪元素，并允许其与 :current 结合使用。（Issues 10212, 10213, 和 10298）
• 增加了 ::details-content 伪元素。（Issue 10379）
• 允许空格和不换行空格出现在 第一个字母 之前的 ::first-letter 中。（Issue 9413）
• 将 ::postfix 重命名为 ::suffix。（Issue Issue 11949）
• 将内联布局属性排除在 ::placeholder 之外。（Issue 5379）
• 明确了 UA 不得微调作者为高亮伪元素指定的颜色。（Issue 6853）
• 明确了 color 的继承值是 currentColor，而不是初始值。

自 2020 年 12 月 31 日工作草案以来的重大变化包括：

• 增加了 ::first-letter::prefix 和 ::first-letter::postfix 子伪元素，以处理与 ::first-letter 伪元素关联的标点符号。（Issue 2040）
• 微调了第一个字母文本模式
  • 将分词空格排除在第一个字母文本之外。（Issue 5830）
  • 将破折号和前标点从后标点中排除。（Issue 5830）
  • 允许符号代表第一个字母。（Issue 5099）
  • 明确了第一个字母文本会被换行符截断。（Issue 2254）
• 重写并澄清了 :first-letter 的定义，并改进了示例和说明。
• 重写并澄清了 ::first-line 的定义，并改进了示例。
• 定义了 line-height 在 ::first-line 上的应用。（Issue 2282）
• 定义了 ::first-line 与 ::first-letter 的盒结构交互方式。
• 定义了 ::first-line 与根内联盒的层级顺序。（Issue 1384）
• 明确了高亮伪元素的 color 和 background-color 的成对默认值行为。（Issue 6386, Issue 6774, Issue 6779, Issue 7837）
• 定义了强制颜色模式在高亮伪元素上的应用。（Issue 7264）
• 明确了高亮伪元素文本装饰的绘制顺序、传播和应用。（Issue 6022, Issue 6829, Issue 7101）
• 取消了将 caret-color 和 cursor 应用于高亮伪元素。（Issue 4100）
• 明确了高亮伪元素与 getComputedStyle() 的交互。（Issue 6818）
• 明确了自定义属性在伪元素上的应用。（Issue 6264）
• 使用 parent 属性和 pseudo() 方法扩展了 CSSPseudoElement 接口，以处理子伪元素。（Issue 3836）

自 2019 年 2 月 25 日工作草案以来的重大变化包括：

• 增加了 ::target-text 伪元素。（Issue 5522）
• 移除了 ::inactive-selection。（Issue 4579）
• 增加了 ::file-selectors-button 伪元素。（Issue 5049）
• 调整了从 ::first-line 继承属性的规则，以不同方式处理可继承与不可继承属性，特别排除了控制书写模式的属性的适用性，因为它们会影响层叠，并定义了与自定义属性的交互。（Issue 1097）
• 将 ruby-position 添加到 ::first-line 允许使用的属性中，类似于 text-emphasis-position。（Issue 2998）
• 在 ::first-letter 中包含了第一个字母及其周围标点之间的空格。（Issue 5154）
• 定义了 ::marker 与 ::first-letter 的交互方式。
• 使 ::before::marker 和 ::after::marker 有效。（Issue 1793）
• 将适用于 ::marker 的属性列表移至 [CSS-LISTS-3]（同时增加了 content、unicode-bidi 和 direction）。
• 将 ::marker 添加到 CSSPseudoElement 接口允许的类型中。（Issue 3763）
• 明确了 pseudo() 的返回值。（Issues 3603 和 3607）
• 允许行内级盒的高亮层覆盖延伸到行盒边缘。（Issues 5395 和 4624）
• 明确了在高亮伪元素上使用 currentColor 时，使用的是文本在“未被高亮”时所使用的颜色，即使该颜色是由 ::first-line 这样的伪元素提供的。（Issue 4625）
• 定义了 text-shadow 与高亮伪元素的交互方式。（Issue 3932）
• 改进了适用于高亮伪元素的默认 UA 样式表规则。

自 2016 年 6 月 7 日工作草案以来的变化包括：

• 在 UA 样式表中将 spelling-error 和 grammar-error 分别与 ::spelling-error 和 ::grammar-error 关联。
• 重新定义了父/子高亮伪元素之间的值传播，使用继承而非层叠。参见 Issue 2474 及其链接的讨论。
• 完善了高亮伪元素支持的属性列表，例如增加了 stroke-color/fill-color，移除了 outline 等。
• 明确了如何为高亮伪元素绘制文本及文本装饰颜色。
• 在 CSSPseudoElement 接口中增加了 element 属性。
• 更改了 CSSPseudoElement 接口上 type 属性的值，以匹配相应的伪元素。
• 减少了 CSSPseudoElement 支持的类型，并移除了未实现的 style 属性。
• 将 window.getPseudoElements(elem,type) 更改为 Element.pseudo(type)。
• 杂项次要澄清和修正。

致谢

编辑们要特别鸣谢以下个人对本规范作出的贡献：Tab Atkins、Delan Azabani、David Baron、Oriol Brufau、Razvan Caliman、Stephen Chenney、Chris Coyier、Anders Grimsrud、Vincent Hardy、François Remy。