跳到主要内容

CSS 伪元素选择器

什么是CSS伪元素选择器？​

CSS伪元素选择器是一种特殊的CSS选择器，用于选择元素的特定部分或向元素添加虚拟内容。与伪类选择器不同，伪元素选择器不是选择元素的某个状态，而是选择元素的一部分或在其前后插入内容。

伪元素选择器以双冒号 :: 开头，例如 ::before 和 ::after。虽然单冒号 : 也可以用于伪元素（为了兼容旧版浏览器），但现代CSS规范推荐使用双冒号。

常见的伪元素选择器​

以下是几个常用的伪元素选择器：

  1. ::before：在元素内容的前面插入虚拟内容。
  2. ::after：在元素内容的后面插入虚拟内容。
  3. ::first-line：选择元素的第一行文本。
  4. ::first-letter：选择元素的第一个字母。
  5. ::selection：选择用户选中的文本部分。

1. ::before 和 ::after​

::before 和 ::after 伪元素用于在元素内容的前后插入虚拟内容。这些内容可以通过 content 属性定义。

css
p::before {
  content: "前置内容 - ";
  color: red;
}

p::after {
  content: " - 后置内容";
  color: blue;
}

输入：

html
<p>这是一个段落。</p>

输出：

前置内容 - 这是一个段落。 - 后置内容
提示

content 属性是 ::before 和 ::after 伪元素的必需属性。即使你不想插入任何文本内容，也需要设置为 content: ""。

2. ::first-line 和 ::first-letter​

::first-line 和 ::first-letter 伪元素用于为元素的第一行或第一个字母添加样式。

css
p::first-line {
  font-weight: bold;
  color: green;
}

p::first-letter {
  font-size: 2em;
  color: red;
}

输入：

html
<p>这是一个段落，用于演示伪元素选择器的效果。</p>

输出：

**这是一个段落，** 用于演示伪元素选择器的效果。
备注

::first-line 和 ::first-letter 只能应用于块级元素（如 <p>、<div> 等）。

3. ::selection​

::selection 伪元素用于为用户选中的文本部分添加样式。

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

输入：

html
<p>选中这段文本，看看效果。</p>

输出：

选中这段文本，看看效果。
警告

::selection 伪元素不支持所有CSS属性，仅支持 color、background-color、cursor、outline 等少数属性。

实际应用场景​

1. 添加装饰性内容​

::before 和 ::after 常用于添加装饰性内容，例如图标、引号等。

css
blockquote::before {
  content: "“";
  font-size: 2em;
  color: gray;
}

blockquote::after {
  content: "”";
  font-size: 2em;
  color: gray;
}

输入：

html
<blockquote>这是一个引用。</blockquote>

输出：

“这是一个引用。”

2. 首字母大写​

::first-letter 可以用于实现首字母大写的效果。

css
p::first-letter {
  font-size: 3em;
  float: left;
  margin-right: 5px;
  color: purple;
}

输入：

html
<p>这是一个段落，首字母会被放大。</p>

输出：

**T**这是一个段落，首字母会被放大。

3. 高亮选中文本​

::selection 可以用于高亮用户选中的文本，提升用户体验。

css
::selection {
  background-color: #ffcc00;
  color: #000;
}

输入：

html
<p>选中这段文本，看看高亮效果。</p>

输出：

选中这段文本，看看高亮效果。

总结​

CSS伪元素选择器为网页设计提供了强大的工具，允许开发者在不修改HTML结构的情况下，为元素添加额外的样式和内容。通过 ::before、::after、::first-line、::first-letter 和 ::selection 等伪元素，你可以轻松实现各种视觉效果，提升用户体验。

附加资源与练习​

  • 练习1：尝试使用 ::before 和 ::after 伪元素为一个按钮添加前后图标。
  • 练习2：使用 ::first-letter 伪元素为段落的首字母添加特殊样式。
  • 练习3：为你的网页添加自定义的选中文本高亮效果。
注意

在使用伪元素时，务必注意浏览器兼容性。虽然现代浏览器大多支持双冒号语法，但在某些旧版浏览器中可能需要使用单冒号语法。

希望这篇内容能帮助你更好地理解和使用CSS伪元素选择器！继续探索CSS的奇妙世界吧！