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