原文： How to Use CSS Combinators to Select and Style Elements
组合器允许你将多个选择器组合起来，以选择 DOM 中的特定元素。在这篇文章中，我将用实例来解释四个组合器。
在我上一篇关于 CSS 选择器类型的文章中，我分享了七种类型的选择器，用于选择你想要为其设置样式的元素。
如果你还没有看过那篇文章，我建议你在阅读这篇文章之前先读一读它。
在本教程中，我讲的是组合器，它允许你使用多种选择器类型来选择元素。这种选择是基于符合指定的多个选择器类型的元素之间的关系。
如果你喜欢的话，这篇文章还有一个视频版本。
下面是 CSS 中的四个组合器以及它们的工作原理。
如何使用后代组合器
这个组合器允许你选择一个元素，它是另一个元素的后代。这里的“后代”可以是孩子、孙子、曾孙、曾曾曾......等等。
要使用这个组合器，你要在选择器之间输入一个空格，像这样：
.container p {
color: red;
}
上面这个样式声明选择了 p 元素，这些元素是具有 div class 的元素的后代。
它在 HTML 中是这样的：
<p>I am the first p</p>
<div class='container'>
<p>I am the second p</p>
<div>
<p>I am the third p</p>
</div>
</div>
<p>I am the last p</p>
结果如下：
从上面的结果中，你可以看到第二个和第三个 p 被设置了样式。这是因为它们都是 .container 元素的后代。第二个 p 是直接子元素，而第三个 p 是孙子元素（div 的直接子元素），但它们都是后代。
你也可以像这样使用多个选择器：
.container div p {
color: red;
}
结果如下：
正如你所看到的，只有第三个 p 被设置了样式，因为这个元素是 div 元素的后代，而 div 又是具有 container class 的元素的后代。
如何使用子代组合器
子代组合器匹配子代、孙代，以此类推。子代组合器选择的元素是另一个元素的直接子代。
你在选择器之间使用大于符号（>）来指定一个选择器是另一个的直接子代。
下面是一个例子：
.container > p {
color: red;
}
这个样式将选择所有作为 container class 元素的直接子元素的 p 元素。让我们看看这在上面的 HTML 例子中是如何运行的：
<p>I am the first p</p>
<div class='container'>
<p>I am the second p</p>
<div>
<p>I am the third p</p>
</div>
</div>
<p>I am the last p</p>
结果如下：
正如你在这里看到的，只有第二个 p 受到影响。尽管第二个和第三个 p 元素是 container class 元素的后代，但只有第二个是直接子元素，正如我们在 CSS 中所指定的那样。
你也可以像这样用这个组合器使用多个选择器：
.container > div > p {
color: red;
}
这种样式设计将匹配所有 p 元素，这些元素是 div 元素的直接子代，而 div 元素又是 container class 元素的直接子代。
如何使用相邻兄弟组合器
我们已经看过了后代，那么兄弟姐妹呢——就像在一个家庭环境中一样？在选择器之间使用的相邻兄弟组合器，可以匹配作为另一个元素的兄弟的元素。
要使用这个组合器，你要输入 ~ 符号。下面是一个例子：
div ~ p {
color: red;
}
这种样式设计选择了所有与 div 元素同级的 p 元素。比方说，我们有以下的 HTML：
<p>I am the first p</p>
<div class='container'>
<p>I am the second p</p>
<div>
<p>I am the third p</p>
</div>
</div>
<p>I am the last p</p>
<p>I am the very last p</p>
结果如下：
最后两个 p 有颜色样式。这是因为 div（具有 container class）和这些 p 是兄弟元素。
然而，如果你注意到，第一个 p 也是该 div 的兄弟元素。那么为什么它没有被设置样式呢？
原因是，在我们的 CSS 中，我们是这样使用子代组合器的：
div ~ p
这个选择意味着它只选择 div 元素后面的 p 兄弟元素。之前的兄弟元素不受影响。
如果选择变为：
p ~ div
然后它将选择在 p 元素之后的 div 的同级元素。
如何使用相邻组合器
这个组合器与兄弟组合器类似。不同的是，兄弟组合器匹配一个元素之后的所有兄弟元素，而相邻组合器只匹配一个元素之后的紧接着的兄弟元素。
要使用这个组合器，你要使用 + 符号，像这样：
div + p {
color: red;
}
这种样式会影响到作为 div 元素之后的即时兄弟元素，即 p 元素。比方说，我们有前面的 HTML 例子：
<p>I am the first p</p>
<div class='container'>
<p>I am the second p</p>
<div>
<p>I am the third p</p>
</div>
</div>
<p>I am the last p</p>
<p>I am the very last p</p>
结果如下：
从这个结果中，你可以看到，只有第四个 p 元素被设置了样式。这是因为在我们的 HTML 代码中，这个 p 元素是 div 元素之后的一个紧接着的兄弟元素。
尽管最后一个 p 也是 div 元素之后的同级元素，但它并不是 div 的相邻元素。
总结
正如我们在这篇文章中所看到的，组合器允许你使用多种选择器类型。根据 DOM 中与这些选择器相匹配的元素之间的关系，你可以针对元素进行样式设计。
我们看到的组合器有：
- 后代组合器：用于选择属于其他元素的后代元素
- 子代组合器：用于选择属于其他元素的直接子代元素
- 兄弟组合器：用于选择在其他元素之后的兄弟元素
- 相邻组合器：用于选择其他元素之后的紧接着的兄弟元素
如果你喜欢这篇文章并从中受益，请和其他人分享它 💜