伪元素选择器

伪元素选择器（Pseudo-element Selector）是CSS中的一种特殊选择器，它用于选择元素的特定部分，而不是元素本身。伪元素选择器以双冒号(::)开头，后跟伪元素名称。

基本语法

伪元素选择器的语法如下：

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

其中，selector是基本选择器，pseudo-element是伪元素名称。

注意：在CSS3之前，伪元素使用单冒号(:)表示。为了区分伪类和伪元素，CSS3规定伪元素使用双冒号(::)表示。不过，为了向后兼容，大多数浏览器仍然支持使用单冒号表示伪元素。

常用伪元素选择器

1. ::before

在元素内容之前插入生成的内容。

css 
h1::before {
  content: "★ ";
  color: gold;
}

这段CSS会在所有h1元素的内容之前插入一个金色的星星符号。

2. ::after

在元素内容之后插入生成的内容。

css 
a::after {
  content: " ↗";
  font-size: 12px;
}

这段CSS会在所有链接的内容之后插入一个小箭头符号。

3. ::first-line

选择元素的第一行文本。

css 
p::first-line {
  font-weight: bold;
  color: blue;
  font-size: 18px;
}

这段CSS会选择所有p元素的第一行文本，并为其设置粗体、蓝色和较大的字体。

4. ::first-letter

选择元素的第一个字母。

css 
p::first-letter {
  font-size: 36px;
  font-weight: bold;
  color: red;
  float: left;
  margin-right: 5px;
  line-height: 1;
}

这段CSS会选择所有p元素的第一个字母，并为其设置较大的字体、粗体、红色，并使其左浮动，创建首字下沉效果。

5. ::selection

选择被用户选中的文本。

css 
::selection {
  background-color: yellow;
  color: black;
}

::-moz-selection {
  background-color: yellow;
  color: black;
}

这段CSS会选择所有被用户选中的文本，并为其设置黄色背景和黑色文本。由于Firefox使用不同的前缀，需要添加::-moz-selection。

6. ::placeholder

选择表单元素的占位符文本。

css 
input::placeholder {
  color: #999;
  font-style: italic;
}

textarea::placeholder {
  color: #999;
  font-style: italic;
}

这段CSS会选择所有输入框和文本区域的占位符文本，并为其设置灰色和斜体样式。

7. ::marker

选择列表项的标记（如子弹头或数字）。

css 
li::marker {
  color: red;
  font-size: 1.5em;
}

这段CSS会选择所有列表项的标记，并为其设置红色和较大的字体。

8. ::backdrop

选择元素的 backdrop（背景幕）。主要用于全屏模式下的元素。

css 
video::backdrop {
  background-color: rgba(0, 0, 0, 0.8);
}

这段CSS会选择全屏模式下的视频元素的背景幕，并为其设置半透明的黑色背景。

特点

  1. 内容生成：可以使用content属性在元素前后生成内容
  2. 部分选择：可以选择元素的特定部分（如第一行、第一个字母等）
  3. 无额外标记：不需要在HTML中添加额外的标记即可选择元素的特定部分
  4. 低优先级：在CSS选择器优先级中，伪元素选择器的优先级与元素选择器相同

注意事项

  1. content属性：对于::before和::after伪元素，必须使用content属性来生成内容，否则伪元素不会显示
  2. 单冒号vs双冒号：建议使用双冒号(::)表示伪元素，以区分伪类和伪元素
  3. 浏览器兼容性：不同的伪元素在不同浏览器中的支持情况不同，尤其是一些较新的伪元素
  4. 盒模型：伪元素会继承其父元素的一些属性，但它们本身也有自己的盒模型

浏览器兼容性

伪元素 Chrome Firefox Safari Edge IE
::before, ::after 1+ 1+ 1+ 12+ 8+
::first-line, ::first-letter 1+ 1+ 1+ 12+ 6+
::selection 1+ 1+ (使用::-moz-selection) 1+ 12+ 9+
::placeholder 4+ 4+ (使用::-moz-placeholder) 4+ 12+ 10+
::marker 86+ 80+ 11.1+ 86+ ❌
::backdrop 15+ 4+ 6+ 12+ 11+

相关资源

学习建议

伪元素选择器是CSS中非常有用的选择器之一，它可以实现许多有趣的效果，如内容生成、首字下沉、选择文本样式等。建议初学者先掌握::before和::after伪元素的使用，这两个伪元素在实际项目中应用最广泛。然后再学习其他伪元素的使用。在使用伪元素时，要注意浏览器兼容性和性能考虑。

最后更新：2026-02-07