组合器

组合器是解释选择器之间关系的某种机制。

CSS 选择器可以包含多个简单选择器。在简单选择器之间可以包含一个组合器。

CSS 中有四种不同的组合器：

• 后代选择器：空格
• 子选择器：>
• 相邻兄弟选择器：+
• 通用兄弟选择器：~

后代选择器

后代选择器匹配属于指定元素后代的所有元素。

例如：选择 <div> 元素内的所有 <p> 元素。

演示

<p>后代选择器匹配作为指定元素后代的所有元素。</p>

<div>
  <p>div 中的段落 1。</p>
  <p>div 中的段落 2。</p>
  <section><p>div 中的段落 3。</p></section>
</div>

<p>段落 4。不在 div 中。</p>
<p>段落 5。不在 div 中。</p>

div p {
  background-color: yellow;
}

子选择器

子选择器匹配属于指定元素子元素的所有元素。

例如：选择属于 <div> 元素子元素的所有 <p> 元素。

演示

<p>子选择器 (>) 选择属于指定元素子元素的所有元素。</p>

<div>
  <p>div 中的段落 1。</p>
  <p>div 中的段落 2。</p>
  <section><p>div 中的段落 3。</p></section> <!-- 非子但属后代 -->
  <p>div 中的段落 4。</p>
</div>

<p>段落 5。不在 div 中。</p>
<p>段落 6。不在 div 中。</p>

div > p {
  background-color: yellow;
}

相邻兄弟选择器

相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。

兄弟（同级）元素必须具有相同的父元素，“相邻” 的意思是 “紧随其后”。

例如：选择紧随 <div> 元素之后的所有 <p> 元素。

演示

<p>相邻的同胞选择器（+）选择所有作为指定元素的相邻的同级元素。</p>

<div>
  <p>div 中的段落 1。</p>
  <p>div 中的段落 2。</p>
</div>

<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>

div + p {
  background-color: yellow;
}

通用兄弟选择器

通用兄弟选择器匹配属于指定元素的同级元素的所有元素。

例如：选择属于 <div> 元素的同级元素的所有 <p> 元素。

演示

<p>通用的兄弟选择器（~）选择指定元素的所有同级元素。</p>

<p>段落 1。</p>

<div>
  <p>段落 2。</p>
</div>

<p>段落 3。</p>
<code>一些代码。</code>
<p>段落 4。</p>

div ~ p {
  background-color: yellow;
}