组合器
我们将要了解的最后一个选择器称为组合器。组合器用于以允许我们根据元素在 DOM 中的位置相对于其他元素（例如，子元素或同级元素）来选择元素的方式组合其他选择器。
| 预备知识 | HTML 基础（学习基本 HTML 语法）、基本 CSS 选择器。 |
|---|---|
| 学习成果 |
|
后代组合器
后代组合器 — 用单个空格 ( ) 字符表示 — 将两个选择器结合在一起，如果第二个选择器匹配的元素具有匹配第一个选择器的祖先（父元素、父元素的父元素，或父元素的父元素的父元素，依此类推）元素，则选中该元素。使用后代组合器的选择器称为后代选择器。
body article p {
}
在下面的示例中，我们只匹配位于类名为 .box 的元素内部的 <p> 元素。
<div class="box"><p>Text in .box</p></div>
<p>Text not in .box</p>
.box p {
color: red;
}
子组合器
子组合器 (>) 放置在两个 CSS 选择器之间。它仅匹配由第二个选择器匹配的、作为由第一个选择器匹配的元素的直接子元素的那些元素。层次结构中更深的后代元素不匹配。例如，要仅选择 <article> 元素的直接子元素的 <p> 元素
article > p {
/* … */
}
在下一个示例中，我们有一个无序列表（<ul>）嵌套在一个有序列表（<ol>）中。子组合器仅选择作为 <ul> 直接子元素的 <li> 元素，并为它们设置上边框样式。
<ul>
<li>Unordered item</li>
<li>
Unordered item
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
</li>
</ul>
ul > li {
border-top: 5px solid red;
}
在前一个示例中，尝试删除指定选择器为子选择器的 >。您最终会得到一个后代选择器，所有 <li> 元素都会获得红色边框。
相邻兄弟组合器
相邻同级组合器 (+) 放置在两个 CSS 选择器之间。它仅匹配由第二个选择器匹配的、紧跟在由第一个选择器匹配的元素之后的那些元素。例如，要选择紧跟在 <p> 元素之后的所有 <img> 元素
p + img {
/* … */
}
一个常见的用例是处理紧跟在标题后面的段落，如下面的示例所示。在这里，我们选择任何与 <h1> 共享父元素并且紧跟在该 <h1> 之后的段落。
<article>
<h1>A heading</h1>
<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>
body {
font-family: sans-serif;
}
h1 + p {
font-weight: bold;
background-color: #333333;
color: white;
padding: 0.5em;
}
在前一个示例中
- 尝试在
<h1>和<p>之间插入另一个元素，例如<h2>。您会发现该段落不再被选择器匹配，因此当元素相邻时，不会应用背景和前景颜色。 - 现在修改
h1 + p选择器，以便特殊样式能再次应用于第一个段落。
后续兄弟组合器
如果您想选择一个元素的同级元素，即使它们不直接相邻，那么您可以使用后续同级组合器 (~)。要选择 <p> 元素之后任何位置的所有 <img> 元素，我们可以这样做：
p ~ img {
/* … */
}
在下面的示例中，我们选择 <h1> 之后的所有 <p> 元素，即使文档中还有一个 <div>，该 <div> 之后的 <p> 也会被选中。
<article>
<h1>A heading</h1>
<p>I am a paragraph.</p>
<div>I am a div</div>
<p>I am another paragraph.</p>
</article>
body {
font-family: sans-serif;
}
h1 ~ p {
font-weight: bold;
background-color: #333333;
color: white;
padding: 0.5em;
}
将组合器与选择器结合使用
您可以将我们在之前课程中学到的任何选择器与组合器结合使用，以选择文档的一部分。例如，要选择 <ul> 的直接子元素且类名为 a 的列表项，请尝试以下方法：
ul > li[class="a"] {
}
但是，在创建选择非常具体文档部分的大型选择器列表时要小心。由于您使选择器非常具体地指向元素在标记中的位置，因此将很难重用 CSS 规则。
通常最好创建一个简单的类并将其应用于相关元素。话虽如此，如果您需要为文档中的某些内容设置样式但又无法访问 HTML（可能是因为它由 CMS 生成），那么您对组合器的了解将非常有用。
总结
到此为止，关于选择器的内容暂时告一段落。接下来，我们将提供一些测试，以检查您对我们提供的关于 CSS 选择器信息的理解和掌握程度。