组合器

¥Descendant combinator

后代组合器（通常由单个空格 ("") 字符表示）组合两个选择器，这样，如果第二个选择器匹配的元素具有与第一个选择器匹配的祖级元素（父元素、父元素的父元素、父元素的父元素的父元素等），则选择该元素。 选择器。使用后代组合器的选择器称为后代选择器。

¥The descendant combinator — typically represented by a single space (" ") character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc.) element matching the first selector. Selectors that utilize a descendant combinator are called descendant selectors.

body article p

在下面的示例中，我们仅匹配 <p> 元素，该元素位于类 .box 的元素内。

¥In the example below, we are matching only the <p> element which is inside an element with a class of .box.

¥Child combinator

子组合器 (>) 放置在两个 CSS 选择器之间。它仅匹配第二个选择器匹配的那些元素，这些元素是第一个选择器匹配的元素的直接子元素。层次结构中更下方的后代元素不匹配。例如，要仅选择作为 <article> 元素的直接子元素的 <p> 元素：

¥The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first. Descendant elements further down the hierarchy don't match. For example, to select only <p> elements that are direct children of <article> elements:

article > p

在下一个示例中，我们有一个有序列表 (<ol>) 嵌套在一个无序列表 (<ul>) 中。子组合器仅选择那些作为 <ul> 直接子元素的 <li> 元素，并使用顶部边框对它们进行样式设置。

¥In this next example, we have an ordered list (<ol>) nested inside an unordered list (<ul>). The child combinator selects only those <li> elements which are direct children of a <ul>, and styles them with a top border.

如果删除将其指定为子组合器的 >，你最终会得到一个后代选择器，并且所有 <li> 元素都将获得红色边框。

¥If you remove the > that designates this as a child combinator, you end up with a descendant selector and all <li> elements will get a red border.

¥Next-sibling combinator

下一个同级组合器 (+) 放置在两个 CSS 选择器之间。它仅匹配第二个选择器匹配的那些元素，这些元素是第一个选择器的下一个同级元素。例如，要选择紧接着 <p> 元素之前的所有 <img> 元素：

¥The next-sibling combinator (+) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the next sibling element of the first selector. For example, to select all <img> elements that are immediately preceded by a <p> element:

p + img

一个常见的用例是对标题后面的段落执行某些操作，如下例所示。在该示例中，我们正在查找与 <h1> 共享父元素并紧跟在 <h1> 之后的任何段落。

¥A common use case is to do something with a paragraph that follows a heading, as in the example below. In that example, we are looking for any paragraph which shares a parent element with an <h1>, and immediately follows that <h1>.

如果你在 <h1> 和 <p> 之间插入一些其他元素，例如 <h2>，你会发现该段落不再与选择器匹配，因此当元素相邻时不会应用背景和前景色。

¥If you insert some other element such as a <h2> in between the <h1> and the <p>, you will find that the paragraph is no longer matched by the selector and so does not get the background and foreground color applied when the element is adjacent.

¥Subsequent-sibling combinator

如果你想要选择一个元素的同级元素，即使它们不直接相邻，那么你可以使用后续同级组合器 (~)。要选择 <p> 元素之后任意位置的所有 <img> 元素，我们可以这样做：

¥If you want to select siblings of an element even if they are not directly adjacent, then you can use the subsequent-sibling combinator (~). To select all <img> elements that come anywhere after <p> elements, we'd do this:

p ~ img

在下面的示例中，我们选择 <h1> 之后的所有 <p> 元素，即使文档中也有 <div>，也会选择它之后的 <p>。

¥In the example below we are selecting all <p> elements that come after the <h1>, and even though there is a <div> in the document as well, the <p> that comes after it is selected.

¥Creating complex selectors with nesting

CSS 嵌套模块 允许你编写使用组合器创建 复杂的选择器 的嵌套规则。

¥The CSS nesting module allows you to write nested rules that use combinators to create complex selectors.

p {
  ~ img {
  }
}
/* This is parsed by the browser as */
p ~ img {
}

& 嵌套选择器 还可用于创建复杂的选择器。

¥The & nesting selector can also be used to create complex selectors.

p {
  & img {
  }
}
/* This is parsed by the browser as */
p img {
}

注意：在上面的示例中，& 嵌套选择器不是必需的，但添加它有助于明确显示正在使用 CSS 嵌套。

¥Note: In the example above, the & nesting selector is not required, but adding it helps to explicitly show that CSS nesting is being used.

¥Using combinators

你可以将我们在前面的课程中发现的任何选择器与组合器结合起来，以便挑选出文档的一部分。例如，要选择类别为 "a" 且是 <ul> 的直接子级的列表项，请尝试以下操作：

¥You can combine any of the selectors that we discovered in previous lessons with combinators in order to pick out part of your document. For example, to select list items with a class of "a" which are direct children of a <ul>, try the following:

ul > li[class="a"] {
}

但是，在创建选择文档中非常特定部分的大型选择器列表时要小心。由于你已经使选择器非常特定于标记中该元素的位置，因此很难重用 CSS 规则。

¥Take care, however, when creating big lists of selectors that select very specific parts of your document. It will be hard to reuse the CSS rules since you have made the selector very specific to the location of that element in the markup.

通常最好创建一个简单的类并将其应用到相关元素。也就是说，如果你需要在文档中设置某些内容的样式并且无法访问 HTML（可能是由于它是由 CMS 生成的），那么你对组合器的了解将非常有用。

¥It is often better to create a simple class and apply that to the element in question. That said, your knowledge of combinators will be very useful if you need to style something in your document and are unable to access the HTML, perhaps due to it being generated by a CMS.

¥Test your skills!

你已读完本文，但你还记得最重要的信息吗？在继续之前，你可以找到一些进一步的测试来验证你是否已保留此信息 - 请参阅 测试你的技能：选择器。

¥You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Selectors.

¥Summary

这是我们关于选择器的课程的最后一部分。接下来，我们将继续讨论 CSS 的另一个重要部分 - 级联、特异性和继承。

¥This is the last section in our lessons on selectors. Next, we'll move on to another important part of CSS — the cascade, specificity, and inheritance.