伪类和伪元素
什么是伪类？
伪类是一种选择器，它选择处于特定状态的元素，例如，它们是其类型的第一个元素，或者它们正在被鼠标指针悬停。它们的作用就像你在文档的某个部分应用了一个类一样，通常可以帮助你减少标记中多余的类，并为你提供更灵活、更易维护的代码。
伪类是以冒号开头的关键字。例如，:hover 是一个伪类。
基本伪类示例
让我们看一个基本示例。如果我们要让文章中的第一个段落更大更粗，我们可以给该段落添加一个类，然后将 CSS 添加到该类中。
html
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
css.first {
font-size: 120%;
font-weight: bold;
}
然而，这可能维护起来很麻烦——如果文档顶部添加了一个新段落怎么办？我们需要将类移动到新段落上。与其添加类，我们不如使用:first-child伪类选择器——它将始终定位元素的第一个子元素（在本例中是），我们不再需要编辑 HTML（这可能并非总是可行，例如由于内容管理系统生成）。
html
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
cssarticle p:first-child {
font-size: 120%;
font-weight: bold;
}
所有伪类都以这种方式工作。它们定位文档中处于某种状态的某些部分，就像你在 HTML 中添加了一个类一样。
注意：在伪类和伪元素前面不带任何元素选择器是有效的。在上面的示例中，你可以写 :first-child，该规则将应用于作为 元素的第一个子元素的任何元素，而不仅仅是段落的第一个子元素——:first-child 等同于 *:first-child。然而，通常你希望有更多的控制，所以你需要更具体。
用户动作伪类
某些伪类仅在用户以某种方式与文档交互时才适用。这些用户动作伪类，有时被称为动态伪类，其作用就像用户与元素交互时已将一个类添加到元素中一样。示例包括：
:hover — 如上所述；这仅在用户将指针移到元素（通常是链接）上方时适用。
:focus — 仅在用户通过点击或使用键盘控件聚焦元素时适用。
html
Hover over me
cssa:link,
a:visited {
color: rebeccapurple;
font-weight: bold;
}
a:hover {
color: hotpink;
}
使用伪类
回到我们的第一个伪类示例，并使用 MDN 游乐场编辑 CSS
添加一条规则，使段落文本在悬停时变为蓝色。
添加一条规则，只选择文章内的最后一个段落，并给它一个橙色的背景颜色。
你可以在 MDN 伪类参考页面上找到所有其他可用伪类的信息。
什么是伪元素？
伪元素的行为方式类似。但是，它们的作用就像你在标记中添加了一个全新的 HTML 元素，而不是将一个类应用于现有元素。
伪元素以双冒号::开头。::before是伪元素的一个例子。
注意：一些早期的伪元素使用单冒号语法，所以你有时会在代码或示例中看到这种写法。现代浏览器为了向后兼容，支持早期伪元素的单冒号或双冒号语法。
例如，如果你想选择段落的第一行，你可以将其包装在一个元素中并使用元素选择器；但是，如果包装的单词数量比父元素的宽度长或短，那就会失败。由于我们通常不知道一行能容纳多少单词——因为屏幕宽度或字体大小改变时它会改变——所以通过添加 HTML 来可靠地做到这一点是不可能的。
::first-line 伪元素选择器将可靠地为您做到这一点——即使单词数量增加或减少，它也只会选择第一行。
html
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
cssarticle p::first-line {
font-size: 120%;
font-weight: bold;
}
它的作用就像一个神奇地包裹着第一行格式化文本，并且每次行长改变时都会更新。
您可以看到这会选择两个段落的第一行。
玩转伪元素
使用 MDN 游乐场编辑上一个示例的 CSS
添加一条规则，使鼠标光标选择的文本部分具有红色的背景颜色（为此你需要::selection伪元素）。选择一些文本进行测试。
添加一条规则，为中每个的第一个字母设置：
黄色的背景颜色。
1px 实线黑色的边框。
2rem的字体大小。
您可以在 MDN 伪元素参考页面上找到所有其他可用伪元素的信息。
组合伪类和伪元素
如果你想让第一个段落的第一行加粗，你可以将:first-child和::first-line选择器链式连接起来。
尝试编辑上一个示例，使其使用以下 CSS。我们表示我们希望选择第一个
元素的第一行，该元素位于元素内部。
cssarticle p:first-child::first-line {
font-size: 120%;
font-weight: bold;
}
使用 ::before 和 ::after 生成内容
有几个特殊的伪元素与content属性一起使用，通过 CSS 将内容插入到文档中。这种技术称为生成内容。
你可以用它来插入一个文本字符串，就像下面的例子一样。我们还给生成的内容设置了黄色的背景颜色，这样它就可以很容易地与段落内容区分开来。
html
Content in the box in my HTML page.
css.box::before {
content: "This should show before the other content. ";
background-color: yellow;
}
玩转生成内容
尝试按如下方式编辑上一个示例
更改content属性的文本值，并观察输出中的变化。
将::before伪元素更改为::after，并观察文本是插入到元素的末尾而不是开头。
生成内容图标
上面的例子是有效的 CSS。然而，从 CSS 中插入文本字符串并不是我们经常做的事情，因为这些文本对某些屏幕阅读器是不可访问的，并且将来可能很难找到和编辑。这些伪元素更有效的用途是插入一个图标，例如下面例子中添加的小箭头，它是一个视觉指示器，我们不希望屏幕阅读器读出来。
html
Content in the box in my HTML page.
css.box::after {
content: " ➥";
}
生成的形状
生成内容也经常用于插入空字符串，然后可以像页面上的任何元素一样对其进行样式设置。
在下一个示例中，我们使用::before伪元素添加了一个空字符串。我们将其设置为display: block，以便我们可以使用宽度和高度对其进行样式设置，从而创建一个正方形。然后我们使用 CSS 像任何元素一样对其进行样式设置。
html
Content in the box in my HTML page.
css.box::before {
content: "";
display: block;
width: 100px;
height: 100px;
background-color: rebeccapurple;
border: 1px solid black;
}
尝试修改上面的 CSS，改变生成形状的外观和行为。
你经常会看到生成内容被用于各种其他任务。一个很好的例子是CSS Arrow Please网站，它帮助你用 CSS 生成箭头。在创建箭头时查看 CSS，你将看到::before和::after伪元素的使用。每当你看到这些选择器时，请查看content属性，了解正在向 HTML 元素添加什么内容。
总结
在本文中，我们介绍了 CSS 伪类和伪元素，它们是特殊类型的选择器。
伪类使你能够在一个元素处于特定状态时对其进行定位，就好像你已经为该状态向 DOM 添加了一个类一样。伪元素的作用就好像你已经向 DOM 添加了一个全新的元素，并使你能够对其进行样式设置。::before和::after伪元素使你能够使用 CSS 将内容插入到文档中。
在下一篇文章中，我们将学习组合器。
另见
伪类参考
伪元素参考
上一页概述：CSS 样式基础下一页
帮助改进 MDN
此页面对您有帮助吗？
是
否
了解如何贡献 本页面最后由MDN 贡献者于2025 年 6 月 16 日修改。
在 GitHub 上查看此页面 • 报告此内容问题
相关内容