CSS 选择器

¥What is a selector?

CSS 选择器是 CSS 规则的第一部分。它是一种元素和其他术语的模式，告诉浏览器应选择哪些 HTML 元素，以便将规则内的 CSS 属性值应用于它们。由选择器选择的一个或多个元素被称为选择器的主题。

¥A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them. The element or elements which are selected by the selector are referred to as the subject of the selector.

在其他文章中，你可能遇到过一些不同的选择器，并了解到有些选择器以不同的方式定位文档 - 例如通过选择诸如 h1 之类的元素，或诸如 .special 之类的类。

¥In other articles you may have met some different selectors, and learned that there are selectors that target the document in different ways — for example by selecting an element such as h1, or a class such as .special.

在 CSS 中，选择器在 CSS 选择器规范中定义；与 CSS 的任何其他部分一样，它们需要浏览器的支持才能工作。你将遇到的大多数选择器都是在 3 级选择器规范 和 4 级选择器规范 中定义的，它们都是成熟的规范，因此你会发现浏览器对这些选择器有出色的支持。

¥In CSS, selectors are defined in the CSS Selectors specification; like any other part of CSS they need to have support in browsers for them to work. The majority of selectors that you will come across are defined in the Level 3 Selectors specification and Level 4 Selectors specification, which are both mature specifications, therefore you will find excellent browser support for these selectors.

¥Selector lists

如果你有多个使用相同 CSS 的事物，则可以将各个选择器合并到一个选择器列表中，以便将规则应用于所有各个选择器。例如，如果我对 h1 和 .special 类有相同的 CSS，我可以将其写为两个单独的规则。

¥If you have more than one thing which uses the same CSS then the individual selectors can be combined into a selector list so that the rule is applied to all of the individual selectors. For example, if I have the same CSS for an h1 and also a class of .special, I could write this as two separate rules.

h1 {
  color: blue;
}

.special {
  color: blue;
}

我还可以通过在它们之间添加逗号将它们组合到选择器列表中。

¥I could also combine these into a selector list, by adding a comma between them.

h1, .special {
  color: blue;
}

逗号之前或之后的空格均有效。如果每个选择器都位于新行，你可能还会发现它们更具可读性。

¥White space is valid before or after the comma. You may also find the selectors more readable if each is on a new line.

h1,
.special {
  color: blue;
}

在下面的实时示例中，尝试组合具有相同声明的两个选择器。组合后的视觉显示应该是相同的。

¥In the live example below try combining the two selectors which have identical declarations. The visual display should be the same after combining them.

当你以这种方式对选择器进行分组时，如果任何选择器在语法上无效，则整个规则将被忽略。

¥When you group selectors in this way, if any selector is syntactically invalid, the whole rule will be ignored.

在以下示例中，无效的类选择器规则将被忽略，而 h1 仍将被设置样式。

¥In the following example, the invalid class selector rule will be ignored, whereas the h1 would still be styled.

h1 {
  color: blue;
}

..special {
  color: blue;
}

然而，当组合时，h1 和类都不会被设置样式，因为整个规则被视为无效。

¥When combined however, neither the h1 nor the class will be styled as the entire rule is deemed invalid.

h1, ..special {
  color: blue;
}

¥Types of selectors

选择器有几种不同的分组，了解你可能需要哪种类型的选择器将帮助你找到适合工作的工具。在本文的子文章中，我们将更详细地了解不同的选择器组。

¥There are a few different groupings of selectors, and knowing which type of selector you might need will help you to find the right tool for the job. In this article's subarticles we will look at the different groups of selectors in more detail.

¥Type, class, and ID selectors

类型选择器以 HTML 元素为目标，例如 <h1>：

¥Type selectors target an HTML element such as an <h1>:

h1 {
}

类选择器的目标元素具有特定的 class 属性值：

¥Class selectors target an element that has a specific value for its class attribute:

.box {
}

ID 选择器针对其 id 属性具有特定值的元素：

¥ID selectors target an element that has a specific value for its id attribute:

#unique {
}

¥Attribute selectors

这组选择器为你提供了根据元素上是否存在特定属性来选择元素的不同方法：

¥This group of selectors gives you different ways to select elements based on the presence of a certain attribute on an element:

a[title] {
}

或者甚至根据具有特定值的属性的存在进行选择：

¥Or even make a selection based on the presence of an attribute with a particular value:

a[href="https://example.com"]
{
}

¥Pseudo-classes and pseudo-elements

这组选择器包括伪类，它们对元素的某些状态进行样式化。例如，:hover 伪类仅当鼠标指针悬停在该元素上时才选择该元素：

¥This group of selectors includes pseudo-classes, which style certain states of an element. The :hover pseudo-class for example selects an element only when it is being hovered over by the mouse pointer:

a:hover {
}

它还包括伪元素，它选择元素的某个部分而不是元素本身。例如，::first-line 始终选择元素内的第一行文本（在下面的情况下为 <p>），其作用就好像 <span> 包裹在第一个格式化行周围然后被选中。

¥It also includes pseudo-elements, which select a certain part of an element rather than the element itself. For example, ::first-line always selects the first line of text inside an element (a <p> in the below case), acting as if a <span> was wrapped around the first formatted line and then selected.

p::first-line {
}

¥Combinators

最后一组选择器结合了其他选择器，以便定位文档中的元素。例如，以下内容使用子组合器 (>) 选择作为 <article> 元素的直接子元素的段落：

¥The final group of selectors combine other selectors in order to target elements within our documents. The following, for example, selects paragraphs that are direct children of <article> elements using the child combinator (>):

article > p {
}

¥Summary

在本文中，我们介绍了 CSS 选择器，它使你能够定位特定的 HTML 元素。接下来，我们来详细了解一下 类型、类和 ID 选择器。

¥In this article we've introduced CSS selectors, which enable you to target particular HTML elements. Next, we'll take a closer look at type, class, and ID selectors.

有关选择器的完整列表，请参阅我们的 CSS 选择器参考。

¥For a complete list of selectors, see our CSS selectors reference.