伪类和伪元素

¥What is a pseudo-class?

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

¥A pseudo-class is a selector that selects elements that are in a specific state, e.g. they are the first element of their type, or they are being hovered over by the mouse pointer. They tend to act as if you had applied a class to some part of your document, often helping you cut down on excess classes in your markup, and giving you more flexible, maintainable code.

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

¥Pseudo-classes are keywords that start with a colon. For example, :hover is a pseudo-class.

¥Simple pseudo-class example

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

¥Let's look at a simple example. If we wanted to make the first paragraph in an article larger and bold, we could add a class to that paragraph and then add CSS to that class, as shown in the first example below:

然而，维护起来可能很烦人 - 如果在文档顶部添加了一个新段落怎么办？我们需要将课程移至新段落。我们可以使用 :first-child 伪类选择器，而不是添加类 - 这将始终针对文章中的第一个子元素，并且我们将不再需要编辑 HTML（无论如何，这可能并不总是可能的，可能是由于 它由 CMS 生成）。

¥However, this could be annoying to maintain — what if a new paragraph got added to the top of the document? We'd need to move the class over to the new paragraph. Instead of adding the class, we could use the :first-child pseudo-class selector — this will always target the first child element in the article, and we will no longer need to edit the HTML (this may not always be possible anyway, maybe due to it being generated by a CMS).

所有伪类都以同样的方式表现。它们的目标是文档中处于某种状态的某些部分，其行为就好像你已将类添加到 HTML 中一样。看看 MDN 上的其他一些例子：

¥All pseudo-classes behave in this same kind of way. They target some bit of your document that is in a certain state, behaving as if you had added a class into your HTML. Take a look at some other examples on MDN:

• :last-child
• :only-child
• :invalid

注意：编写伪类和元素之前没有任何元素选择器是有效的。在上面的示例中，你可以编写 :first-child，并且该规则将适用于 <article> 元素的第一个子元素的任何元素，而不仅仅是段落的第一个子元素 - :first-child 相当于 *:first-child。然而，通常你想要更多的控制，因此你需要更具体。

¥Note: It is valid to write pseudo-classes and elements without any element selector preceding them. In the example above, you could write :first-child and the rule would apply to any element that is the first child of an <article> element, not just a paragraph first child — :first-child is equivalent to *:first-child. However, usually you want more control than that, so you need to be more specific.

¥User-action pseudo classes

某些伪类仅在用户以某种方式与文档交互时才适用。这些用户操作伪类（有时称为动态伪类）的作用就好像当用户与元素交互时已将类添加到元素中一样。示例包括：

¥Some pseudo-classes only apply when the user interacts with the document in some way. These user-action pseudo-classes, sometimes referred to as dynamic pseudo-classes, act as if a class had been added to the element when the user interacts with it. Examples include:

• :hover - 上面提到的；这仅适用于用户将指针移动到元素（通常是链接）上的情况。
• :focus — 仅当用户通过单击或使用键盘控件来聚焦元素时才适用。

¥What is a pseudo-element?

伪元素的行为方式类似。但是，它们的作用就好像你在标记中添加了一个全新的 HTML 元素，而不是将类应用于现有元素。

¥Pseudo-elements behave in a similar way. However, they act as if you had added a whole new HTML element into the markup, rather than applying a class to existing elements.

伪元素以双冒号 :: 开头。::before 是伪元素的示例。

¥Pseudo-elements start with a double colon ::. ::before is an example of a pseudo-element.

注意：一些早期的伪元素使用单冒号语法，因此你有时可能会在代码或示例中看到这种情况。现代浏览器支持早期的伪元素，使用单冒号或双冒号语法以实现向后兼容性。

¥Note: Some early pseudo-elements used the single colon syntax, so you may sometimes see this in code or examples. Modern browsers support the early pseudo-elements with single- or double-colon syntax for backwards compatibility.

例如，如果你想选择段落的第一行，你可以将其封装在 <span> 元素中并使用元素选择器；但是，如果你换行的字数比父元素的宽度长或短，则该操作将会失败。由于我们往往不知道一行中可以容纳多少个单词（因为如果屏幕宽度或字体大小发生变化，该行会发生变化），因此不可能通过添加 HTML 来稳健地做到这一点。

¥For example, if you wanted to select the first line of a paragraph you could wrap it in a <span> element and use an element selector; however, that would fail if the number of words you had wrapped were longer or shorter than the parent element's width. As we tend not to know how many words will fit on a line — as that will change if the screen width or font-size changes — it is impossible to robustly do this by adding HTML.

::first-line 伪元素选择器将可靠地为你执行此操作 - 如果单词数量增加或减少，它仍然只会选择第一行。

¥The ::first-line pseudo-element selector will do this for you reliably — if the number of words increases or decreases it will still only select the first line.

它的作用就好像 <span> 神奇地包裹在第一个格式化的行上，并在每次行长度改变时更新。

¥It acts as if a <span> was magically wrapped around that first formatted line, and updated each time the line length changed.

你可以看到这选择了两个段落的第一行。

¥You can see that this selects the first line of both paragraphs.

¥Combining pseudo-classes and pseudo-elements

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

¥If you wanted to make the first line of the first paragraph bold you could chain the :first-child and ::first-line selectors together. Try editing the previous live example so it uses the following CSS. We are saying that we want to select the first line, of the first <p> element, which is inside an <article> element.

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

¥Generating content with ::before and ::after

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

¥There are a couple of special pseudo-elements, which are used along with the content property to insert content into your document using CSS.

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

¥You could use these to insert a string of text, such as in the live example below. Try changing the text value of the content property and see it change in the output. You could also change the ::before pseudo-element to ::after and see the text inserted at the end of the element instead of the beginning.

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

¥Inserting strings of text from CSS isn't really something we do very often on the web however, as that text is inaccessible to some screen readers and might be hard for someone to find and edit in the future.

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

¥A more valid use of these pseudo-elements is to insert an icon, for example the little arrow added in the example below, which is a visual indicator that we wouldn't want read out by a screen reader:

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

¥These pseudo-elements are also frequently used to insert an empty string, which can then be styled just like any element on the page.

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

¥In this next example, we have added an empty string using the ::before pseudo-element. We have set this to display: block in order that we can style it with a width and height. We then use CSS to style it just like any element. You can play around with the CSS and change how it looks and behaves.

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

¥The use of the ::before and ::after pseudo-elements along with the content property is referred to as "Generated Content" in CSS, and you will often see this technique being used for various tasks. A great example is the site CSS Arrow Please, which helps you to generate an arrow with CSS. Look at the CSS as you create your arrow and you will see the ::before and ::after pseudo-elements in use. Whenever you see these selectors, look at the content property to see what is being added to the HTML element.

¥Summary

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

¥In this article we've introduced CSS pseudo-classes and pseudo-elements, which are special types of selectors.

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

¥Pseudo-classes enable you to target an element when it's in a particular state, as if you had added a class for that state to the DOM. Pseudo-elements act as if you had added a whole new element to the DOM, and enable you to style that. The ::before and ::after pseudo-elements enable you to insert content into the document using CSS.

在下一篇文章中，我们将了解 combinators。

¥In the next article, we'll learn about combinators.

¥See also

• 伪类参考
• 伪元素参考