伪类和伪元素

接下来我们将要介绍的选择器被称为**伪类**和**伪元素**。它们有很多，而且通常用于非常特定的目的。一旦您知道如何使用它们，就可以查看列表，看看是否有适合您尝试完成的任务的内容。同样，每个选择器的相关 MDN 页面有助于解释浏览器支持。

先决条件 安装基本软件，了解 文件处理 的基本知识，HTML 基础知识（学习 HTML 简介），以及 CSS 的工作原理（学习 CSS 入门）。
目标 了解伪类和伪元素选择器。

什么是伪类？

伪类是一种选择器，用于选择处于特定状态的元素，例如，它们是其类型的第一个元素，或者鼠标指针悬停在它们上面。它们往往表现得好像您已将一个类应用到文档的某个部分，通常有助于减少标记中的多余类，并提供更灵活、更易于维护的代码。

伪类是以冒号开头的关键字。例如，:hover 是一个伪类。

简单的伪类示例

让我们来看一个简单的例子。如果我们想使文章中的第一个段落更大且加粗，我们可以向该段落添加一个类，然后向该类添加 CSS，如下面的第一个示例所示

但是，这可能难以维护——如果在文档顶部添加了一个新的段落怎么办？我们需要将类移动到新段落。与其添加类，不如使用 :first-child 伪类选择器——这将始终定位文章中的第一个子元素，并且我们不再需要编辑 HTML（这可能并不总是可能的，可能是由于它是由 CMS 生成的）。

所有伪类的行为都与此类似。它们定位文档中处于某种状态的某一部分，表现得好像您已在 HTML 中添加了一个类。在 MDN 上查看一些其他示例

注意：在没有元素选择器位于其前面时编写伪类和伪元素是有效的。在上面的示例中，您可以编写 :first-child，并且规则将应用于任何作为 <article> 元素的第一个子元素的元素，而不仅仅是段落的第一个子元素——:first-child 等效于 *:first-child。但是，通常您希望获得比这更多的控制，因此您需要更具体。

用户操作伪类

某些伪类仅在用户以某种方式与文档交互时才适用。这些**用户操作**伪类，有时也称为**动态伪类**，表现得好像在用户与之交互时已向元素添加了一个类。示例包括

  • :hover — 如上所述；仅当用户将指针移到元素上（通常是链接）时才适用。
  • :focus — 仅当用户通过点击或使用键盘控件聚焦元素时才适用。

什么是伪元素？

伪元素的行为类似。但是，它们表现得好像您已将一个全新的 HTML 元素添加到标记中，而不是将一个类应用到现有元素。

伪元素以双冒号::开头。::before就是一个伪元素的例子。

注意：一些早期的伪元素使用单冒号语法，因此您有时可能会在代码或示例中看到它。为了向后兼容，现代浏览器支持使用单冒号或双冒号语法的早期伪元素。

例如，如果您想选择段落的首行，您可以将其包裹在一个<span>元素中并使用元素选择器；但是，如果您包裹的单词数量比父元素的宽度长或短，则此方法会失效。由于我们通常不知道一行上能容纳多少个单词——因为如果屏幕宽度或字体大小发生变化，这个数字也会随之改变——因此无法通过添加 HTML 来可靠地实现这一点。

::first-line伪元素选择器可以可靠地为您做到这一点——如果单词数量增加或减少，它仍然只会选择第一行。

它的作用就像一个<span>元素神奇地包裹在第一行格式化文本周围，并在行长发生变化时更新。

您可以看到，这会选择两个段落的第一行。

组合伪类和伪元素

如果您想使第一个段落的第一行变为粗体，可以将:first-child和::first-line选择器链接在一起。尝试编辑前面的实时示例，使其使用以下 CSS。我们的意思是，我们想要选择第一个<p>元素的第一行，该元素位于<article>元素内。

css
article p:first-child::first-line {
  font-size: 120%;
  font-weight: bold;
}

使用 ::before 和 ::after 生成内容

有一些特殊的伪元素，它们与content属性一起使用，用于使用 CSS 将内容插入到您的文档中。

您可以使用它们插入一段文本，例如下面的实时示例。尝试更改content属性的文本值，并查看它在输出中的变化。您还可以将::before伪元素更改为::after，并查看文本插入到元素的末尾而不是开头。

然而，从 CSS 中插入文本字符串并不是我们在网络上经常做的事情，因为这些文本对于某些屏幕阅读器来说是不可访问的，并且将来可能难以被某些人找到和编辑。

这些伪元素更有效的用途是插入图标，例如下面示例中添加的小箭头，这是一个我们不希望屏幕阅读器读出的视觉指示器。

这些伪元素也经常用于插入空字符串，然后可以像页面上的任何元素一样对其进行样式设置。

在下一个示例中，我们使用::before伪元素添加了一个空字符串。为了能够使用宽度和高度对其进行样式设置，我们将其设置为display: block。然后我们使用 CSS 对其进行样式设置，就像任何元素一样。您可以试着修改 CSS，并改变它的外观和行为。

::before和::after伪元素以及content属性的使用在 CSS 中被称为“生成内容”，您会经常看到此技术被用于各种任务。一个很好的例子是网站CSS Arrow Please，它可以帮助您使用 CSS 生成箭头。在创建箭头时查看 CSS，您会看到正在使用的::before和::after伪元素。每当您看到这些选择器时，请查看content属性以了解正在添加到 HTML 元素中的内容。

总结

在本文中，我们介绍了 CSS 伪类和伪元素，它们是特殊类型的选择器。

伪类使您能够在元素处于特定状态时将其作为目标，就像您为该状态向 DOM 添加了一个类一样。伪元素就像您向 DOM 添加了一个全新的元素，并使您能够对其进行样式设置。::before和::after伪元素使您能够使用 CSS 将内容插入到文档中。

在下一篇文章中，我们将学习组合器。

另请参阅