1. Web
  2. CSS
  3. 伪元素

伪元素

CSS 伪元素（pseudo-element）是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。

语法

css
selector::pseudo-element {
  property: value;
}

例如，::first-line 伪元素可以改变段落首行的字体。

css
/* The first line of every <p> element. */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

伪元素使用双冒号（::）。这将其与使用单冒号（:）表示法的伪类区分开来。注意，浏览器支持对最初的四个伪元素使用单冒号语法：::before、::after、::first-line 和 ::first-letter。

伪元素不能独立存在。伪元素所属的元素被称为其始源元素（originating element）。伪元素必须出现在复杂选择器或复合选择器中所有其他组件的后面。选择器中的最后一个元素是该伪元素的始源元素。例如，你可以使用 p::first-line 来选择段落的第一行，但不能选择第一行的子元素。所以 p::first-line > * 是无效的。

可以根据始源元素的当前状态来选择伪元素。例如，p:hover::first-line 会选择段落本身被悬停时（伪类）的段落第一行（伪元素）。

备注： 当选择器列表包含无效选择器时，整个样式块将被忽略。

排版伪元素

::first-line

始源元素的第一个行框。

::first-letter

始源元素第一行上的第一个字母、数字或符号字符。

::cue

所选元素内的 WebVTT 提示。这可用于为带有 VTT 轨道的媒体中的字幕和其他提示设置样式。CSS 伪元素模块还定义了 ::postfix 和 ::prefix 子伪元素。这些目前尚未被任何浏览器支持。

高亮伪元素

根据内容和文档状态选择文档的各个部分，从而可以对这些区域进行不同的样式设置，以向用户指示该状态。

::selection

文档中已被选中的部分。

::target-text

文档的目标元素。目标元素通过 URL 的片段标识符来识别。

::spelling-error

浏览器认为是拼写错误的文本部分。

::grammar-error

浏览器认为是语法不正确的文本部分。

::highlight()

高亮注册表中的元素。用于创建自定义高亮。

树结构伪元素

这些伪元素的行为类似于常规元素，无缝地融入盒模型中。它们作为子元素，可以在始源元素的层次结构中直接设置样式。

::before

创建一个伪元素，作为所选元素的第一个子元素。

::after

创建一个伪元素，作为所选元素的最后一个子元素。

::column

多列布局的每个列片段。

::marker

列表项自动生成的标记框。

::backdrop

在顶层渲染的始源元素的背景。

::scroll-button()

创建一个按钮，可以控制其应用的滚动容器的滚动。

::scroll-marker

创建一个作为滚动标记的伪元素——一个滚动目标按钮，用于其始源元素，嵌套在滚动标记组中。

::scroll-marker-group

在滚动容器之前或之后生成一个容器，以包含在该元素或其后代上生成的 ::scroll-marker 伪元素。

元素支持的伪元素

这些伪元素是真实存在的元素，但无法通过其他方式选择。

::details-content

<details> 元素的可展开/可折叠内容。

::part()

影子树中任何具有匹配 part 属性的元素。

::slotted()

任何被放入 HTML 模板内插槽中的元素。

与表单控件相关的伪元素。

::checkmark

目标是放置在可自定义 select 元素当前选定 <option> 元素内的复选标记，以提供视觉指示哪个被选中。

::file-selector-button

<input> 的 type="file" 类型的按钮。

::picker()

元素的选择器部分，例如可自定义 select 元素的下拉选择器。

::picker-icon

具有关联图标的表单控件内的选择器图标。对于可自定义 select 元素，它会选择当 select 关闭时朝下指向的箭头。

::placeholder

输入字段中的占位符文本。

按字母顺序索引

由一组 CSS 规范定义的伪元素包括以下内容

A

B

C

D

F

G

H

M

P

S

T

V

嵌套伪元素

你可以将一些伪元素选择器链接在一起，为嵌套在其他伪元素中的伪元素设置样式。支持以下嵌套伪元素组合

请查看各个伪元素的参考页面，了解示例和浏览器兼容性信息。

高亮伪元素的继承

高亮伪元素，例如 ::selection、::target-text、::highlight()、::spelling-error 和 ::grammar-error，遵循一种一致的继承模型，该模型不同于常规元素的继承。

当你为高亮伪元素应用样式时，它们会同时从以下两者继承

  1. 其父元素（遵循常规继承）。
  2. 其父元素的高亮伪元素（遵循高亮继承）。

这意味着，如果你同时为父元素的高亮伪元素和子元素的高亮伪元素设置样式，子元素的高亮文本将结合来自这两个来源的属性。

这里有一个具体的例子。

首先，我们有一些 HTML，其中包含两个嵌套的 <div> 元素。一些文本内容直接包含在父 <div> 中，另一些则嵌套在子 <div> 中。

html
<div class="parent">
  Parent text
  <div class="child">Child text</div>
</div>

接下来，我们加入一些 CSS，分别选择父 <div> 和子 <div> 元素，并给它们不同的 color 值，并选择父元素和子元素的选定文本（::selection）。这给每个 <div> 设置了不同的 background-color，并为父元素的选中区域设置了不同的文本 color。

css
/* Style for the parent element */
.parent {
  color: blue;
}

/* Style for the parent's selected text */
.parent::selection {
  background-color: yellow;
  color: red;
}

/* Style for the child element */
.child {
  color: green;
}

/* Style for the child's selected text */
.child::selection {
  background-color: orange;
}

该示例呈现如下

尝试选中父元素和子元素中的文本。请注意

  1. 当你选择父元素文本时，它使用 .parent::selection 中定义的黄色背景和红色文本颜色。
  2. 当你选择子元素文本时，它使用
    • 来自 .child::selection 的橙色背景。
    • 继承自父元素 ::selection 伪元素的红色文本颜色。

这说明了子元素的高亮伪元素如何同时从其父元素和父元素的高亮伪元素继承。

高亮伪元素中的 CSS 自定义属性（变量）从其始源元素（即它们被应用的元素）继承，而不是通过高亮继承链继承。例如

css
:root {
  --selection-color: lightgreen;
}

::selection {
  color: var(--selection-color);
}

.blue {
  --selection-color: blue;
}

当对高亮伪元素使用通用选择器时，会阻止高亮继承。例如

css
/* This prevents highlight inheritance */
*::selection {
  color: lightgreen;
}

/* Prefer this to allow inheritance */
:root::selection {
  color: lightgreen;
}

规范

规范
CSS 伪元素模块 Level 4
CSS 定位布局模块第 4 级
CSS 影子部分
WebVTT：网页视频文本轨道格式

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ，由 MDN 贡献者们更新。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.