CSS 伪元素模块 第 4 级

1. 介绍

本节为参考性内容。

伪元素代表文档中由文档语言未显式创建的抽象元素。由于它们不受限于文档树结构，可以用于选择和样式化那些不一定对应于文档树结构的文档部分。例如，::first-line 伪元素可以选中某元素在文本换行后首个格式化行中的内容，从而使该行可以与段落的其余部分采用不同样式。

每个伪元素都关联一个起始元素，其语法形式为 ::伪元素名。本模块定义了 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 元素 <p><br>First… 的首行并不包含字母。因此，“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”。

为了能够分别设置 首字 本身及其相邻标点的样式，相关的前置标点通过 ::prefix 子伪元素 表示（即 ::first-letter::prefix）；相关的后置标点通过 ::suffix 子伪元素 表示（即 ::first-letter::suffix）。参见下文§ 2.2.1 首字母与相关标点。

2.2.1. 首字母与相关标点

如CSS Text 3 § 1.4 字符与字母所述， 印刷字符单元 可以包含多个 Unicode 码点。例如，组合字符必须与其基字符保持在一起。某些语言对特定字母组合还有额外规则。例如在荷兰语中，如果元素开头是 "ij"，则这两个字母都应算作 ::first-letter 伪元素的一部分。[UAX29] 选择首字时，用户代理应根据 ::first-letter 伪元素的 包含块的 内容语言，对 印刷字符单元 的定义做出调整以契合首字传统。

前后标点也必须作为首字文本的一部分包含在 ::first-letter 伪元素中，具体如下：

• 所有前置标点（即属于 Unicode 通用类别 P* 的字符，见 [UAX44]），以及其间的印刷空格（类别 Zs，除 U+3000 全角空格外），都应包括在 首字 之前。
• 所有后置标点（属于 P*，但不包括开头标点 Ps 和破折号 Pd），以及其间的印刷空格（类别 Zs，除 U+3000 全角空格和单词分隔符外），都应包括在 首字 之后。

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

2.2.2. 查找首字母文本

和 ::first-line 一样， ::first-letter 伪元素 只有附加在 块容器 上时才会生效。 它的 首字文本 是其 起始元素 的 首个格式化行 的 首个参与内联格式化上下文的内容， 前提是其前没有其他流内内容（如图片或内联表格）。

在此过程中，任何 marker 盒 都会被忽略，视为脱离文档流。 但如果元素有流内 ::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>

如果组成首字文本的字符并不全部在同一个元素中（如 ‘T 在 <p>‘<em>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 所代表的 首字文本。

注： 在以往 CSS 级别中，用户代理被允许基于字母形状选择行高、宽度和高度以近似字体大小；并在布局时考虑字形轮廓。这种宽泛定义的“魔法”实现已被有意移除，因为它未能很好地服务于首字下沉与抬头字的实际需求，反而带来了兼容性问题。参见 initial-letter（[CSS-INLINE-3]），用于明确实现首字下沉和抬头字。

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 伪元素表示由用户代理的页面内查找功能定位到的文本。 由于并非所有用户代理都会以 高亮伪元素 可表达的方式为匹配到的文本设置样式， 因此该伪元素为可选实现。

: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; }

某些高亮伪元素应当具备配对的默认高亮颜色——由用户代理提供的默认 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 方框，并且可以进一步向上/下扩展到行盒(line box)边缘。两个字符之间的间距也可以作为覆盖层区域的一部分，此时该区域属于包含这两个字符的最内层元素，当两个字符都被选中时也会被选中。
  测试

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

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

参见 F2F 会议纪要、 dbaron 的邮件、 Daniel 的讨论、 Gecko 说明、 Opera 说明、 Webkit 说明

不确定这是否是描述实际工作方式的正确方式。

3.5. 层叠与每个元素的高亮样式

每个元素会绘制其自身高亮覆盖层（highlight overlays）的活动部分，这些覆盖层会应用该元素作为高亮伪元素时指定的样式（即该元素为起始元素）。当多个样式冲突时，最终样式由级联规则决定。

当任何受支持属性没有被级联赋值，或被赋值为 inherit 或 unset 时，其指定值将通过继承来自其高亮伪元素的父元素的起始元素。无论该属性是否本身可继承（inherited property），都适用此规则。

此外，对于起始于根元素的高亮伪元素，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，在所有高亮覆盖层背景之上重绘文本和这些装饰。

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

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

注：无论原始颜色或填充为何，当该伪元素的color属性不是 currentColor 时，元素自身的文本装饰（包括行装饰和强调标记）都会以伪元素的颜色绘制。

每个高亮伪元素引入的文本装饰，会与其背景一样按顺序堆叠在文本原有装饰之上，且每个装饰各自以自己的颜色绘制。正常的绘制顺序适用，因此根据CSS2 附录 E，所有下划线绘制在上划线之下，上划线绘制在文本下方，文本又在删除线下方。不过，通过::selection应用的文本装饰，也可以与文本一起作为最顶层一组层绘制在所有其他装饰之上。

由行装饰引入的高亮伪元素仅应用于其起始元素关联的文本，并不会传播到后代，除非通过继承（如上文所述）。

注：与起始元素自身的装饰不同，在高亮伪元素上声明的装饰会传播到脱离文档流的元素和inline block，其厚度和位置可在后代间变化。

3.6.4. 替换元素

对于非替换内容，UA 必须按指定尊重 color 和 background-color（包括它们的 alpha 通道）。 但对于替换内容，UA 应当创建一个半透明遮罩覆盖内容，使内容能够透过选区显示。该遮罩应采用指定的 background-color（若其不是 transparent），否则采用指定的 color；不过 UA 可以调整 alpha 通道。

3.7. 高亮的安全性注意事项

由于拼写和语法错误的样式可能会泄露用户词典的内容信息（这可能包括用户的姓名，甚至包括他们的地址簿！）， 实现::spelling-error 和 ::grammar-error的UA必须 防止网页读取这些高亮段落的样式。

4. 树形伪元素

树内型伪元素（Tree-abiding pseudo-elements）始终属于盒子树的一部分。它们会从其起始元素继承任何可继承属性；非继承属性则按常规使用其初始值。[CSS-CASCADE-4] 其中的一部分称为完全可样式化伪元素（fully styleable pseudo-elements）；对真实元素适用的所有属性，对完全可样式化伪元素同样适用。

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 伪元素表示 标记盒（marker box）的自动生成部分，该盒属于 列表项。 （参见 [CSS-DISPLAY-3] 和 [CSS-LISTS-3]。）

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

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

::marker 是一个树内型伪元素，但不是完全可样式化的；只能对 ::marker 伪元素使用有限的属性。完整列表见 CSS Lists 3 § 3.1.1 Properties Applying to ::marker。

::before::marker 或 ::after::marker 选择器是合法的，可用于表示作为 列表项的 ::before 或 ::after 伪元素的标记盒。但 ::marker::marker 是无效的，并且 display 在 ::marker 上的计算值总是会丢弃 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. 元素支持的伪元素（Element-backed Pseudo-Elements）

元素支持的伪元素（element-backed pseudo-elements），在大多数 CSS 和其他平台特性中表现得就像是真实元素一样（实际上，它们通常就是实际存在、但无法被常规选择器选中的真实元素）。

元素支持的伪元素总是树内型。除非另有说明，它们是完全可样式化的，并从其起始元素继承属性，就像标准的树内型伪元素一样；但它们也可以被定义为从其他元素继承属性（如 ::part() 继承自其在 shadow tree 中所代表元素的父节点）。

所有伪类和伪元素在语法上都允许跟在元素支持的伪元素（如 x-button::part(label):hover 或 x-button::part(label)::before）之后，就像该伪元素是类型选择器一样；但部分伪类/伪元素不能被匹配：

• 结构性伪类（structural pseudo-classes）、:has()、:scope 以及 :host/:host()/:host-context() 伪类永远不会被匹配。

• ::part() 也永远不会被匹配（但其它元素支持的伪元素可以）。

一个元素支持的伪元素可以定义自身为代表一个真实元素（可能该元素在当前树中不可访问）。如果这样定义，则所有未被禁止（如上所述）的伪类/伪元素都像在该真实元素上一样被匹配。如果没有这样定义，则它必须规定自身可匹配哪些伪类及其匹配时机；不过，除非另有说明，所有允许用于树内型伪元素的伪类总是也允许用于元素支持的伪元素。

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

::file-selector-button 伪元素用于选中 <input>（type=file）元素内部的 <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. 伪元素重叠交互（Overlapping Pseudo-element Interactions）

<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 对象模型（CSS Object Model）的补充

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. pseudo() 方法（Element 接口）

在 Element 接口上新增了一个方法，用于获取由给定元素创建的指定类型的伪元素：

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

对于同一个元素和同一个伪元素类型，返回值在可观察范围内必须始终是同一个 CSSPseudoElement 对象。（UA 可为便利或性能释放/重建对象，只要不可观察到即可。）

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

7.3. getComputedStyle()

当第二个参数 pseudoElt 指向高亮伪元素时，getComputedStyle() 返回的样式表现为该高亮伪元素处于激活状态、所有其它高亮都处于非激活状态。这样可避免返回依赖实际高亮状态的结果带来的歧义和隐私风险。

8. 兼容性语法（Compatibility Syntax）

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

安全性注意事项（Security Considerations）

有关高亮的安全性，请参见 § 3.7 高亮的安全性注意事项。

隐私注意事项（Privacy Considerations）

本模块尚未提出新的隐私注意事项。

变更记录（Changes）

自 2022年12月30日工作草案 以来的主要变更包括：

• 定义了 元素支持的伪元素（element-backed pseudo-element）和完全可样式化伪元素（fully styleable pseudo-element）两个术语。（Issue 10199，Issue 10083）
• 重构了高亮伪元素的属性（包括自定义属性）应用和继承模型（7591，7580，6641，11317）
• 定义了::highlight()，并加强了与[CSS-HIGHLIGHT-API-1]的交叉引用。（Issue 6755）
• 新增了::search-text作为新的高亮伪元素，并允许其与:current组合。（10212、10213、10298）
• 添加了::details-content伪元素（Issue 10379）
• 允许空格和不换行空格在::first-letter中出现在首字母之前。（Issue 9413）
• 将::postfix重命名为::suffix。（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 和根内联盒（root inline box）的层级顺序。（Issue 1384）
• 澄清了配对默认值在高亮伪元素 color 和 background-color 上的行为。（Issue 6386，Issue 6774，Issue 6779，Issue 7837）
• 定义了强制颜色模式（forced colors mode）对高亮伪元素的影响。（Issue 7264）
• 澄清了高亮伪元素文本装饰的绘制顺序、传播和应用。（Issue 6022，Issue 6829，Issue 7101）
• 将 caret-color 和 cursor 从高亮伪元素可应用属性中移除。（Issue 4100）
• 澄清了高亮伪元素与 getComputedStyle() 的交互。（Issue 6818）
• 澄清了自定义属性在伪元素上的应用。（Issue 6264）
• 扩展了 CSSPseudoElement 接口，增加了 parent 属性和 pseudo() 方法，用于处理子伪元素。（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() 的返回值。（3603 和 3607）
• 允许内联级盒子的高亮覆盖层扩展到行盒边缘。（5395 和 4624）
• 澄清 currentColor 在 高亮伪元素 上应使用未“高亮”时的颜色，即便该颜色由伪元素如 ::first-line 提供。（Issue 4625）
• 定义了 text-shadow 与 高亮伪元素的交互。（Issue 3932）
• 改进了默认 UA 样式表中应用于高亮伪元素的规则。

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

• 规范了 spelling-error 和 grammar-error，分别通过 ::spelling-error 和 ::grammar-error 在 UA 样式表中实现。
• 将父/子高亮伪元素间的值传播机制从级联改为继承。详见 Issue 2474 及相关讨论。
• 细化了高亮伪元素支持的属性列表，如增加 stroke-color / fill-color，移除 outline 等。
• 澄清了高亮伪元素中文本及文本装饰颜色的绘制方式。
• 为 element 属性添加至 CSSPseudoElement 接口。
• 更改 type 属性值，使其与对应伪元素一致。
• 减少 CSSPseudoElement 支持的类型，移除未实现的 style 属性。
• 将 window.getPseudoElements(elem, type) 更名为 Element.pseudo(type)。
• 其他杂项澄清和修正。

致谢（Acknowledgements）

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