组合器和选择器组

虽然有时候使用一个选择器就很有用，但在某些情形中却可能效率低下。 CSS选择器在你开始组合他们进行细粒度选择的时候变得更具使用价值。基于元素之间的相互关联关系，CSS提供了几种方法来对元素进行选择。下表使用连接符展示了这些关联关系(A和B代表前文所述的任意选择器):

名称	组合器	选择
选择器组	A,B	匹配满足A（和/或）B的任意元素（参见下方 同一规则集上的多个选择器）.
后代选择器	A B	匹配B元素，满足条件：B是A的后代结点（B是A的子节点，或者A的子节点的子节点）
子选择器	A > B	匹配B元素，满足条件：B是A的直接子节点
相邻兄弟选择器	A + B	匹配B元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面）
通用兄弟选择器	A ~ B	匹配B元素，满足条件：B是A之后的兄弟节点中的任意一个（AB有相同的父节点，B在A之后，但不一定是紧挨着A）

组合器示例

每一种选择器的实例如下
选择器组 A，B

A, B 选中匹配 A 或/和 B 的元素

.author, .famous {
  font-weight: bold;
}
<h1>登鹳雀楼</h1>
<p class="author">王之涣<p>
<p class="normal">百日依山尽，黄河入海流。</p>
<p class="famous">欲穷千里目，更上一层楼。</p>

后代选择器(A B)

A B 选中匹配 B 且为匹配 A 的元素的后代元素。

.article a {
  color: #384ebf;
}

子选择器 A > B

A > B 选中匹配 B 且为匹配 A 的元素的直接子元素。

.warriors > li {
  background-image: url(../images/warrior.svg);
}
<ul class="warriors">
  <li><!-- ✅ -->
    斯蒂芬·库里
    <ul>
      <li>微博：<a href="http://weibo.com/u/3432945104">@StephenCurry</a></li>
      <li>Twitter: <a href="https://twitter.com/stephencurry30">@StephenCurry30</a></li>
    </ul>
  </li>
  <li>凯文·杜兰特</li><!-- ✅ -->
  <li>克莱·汤普森</li><!-- ✅ -->
  <li>德雷蒙德·格林</li><!-- ✅ -->
</ul>

相邻兄弟选择器 A +B

A + B 选中匹配 B 且为匹配 A 的元素的下一相邻元素。

  .cavs .lbj + li {
  text-shadow: 1px 1px 5px #ccc;
}
<ul class="cavs">
  <li class="lbj">勒布朗·詹姆斯</li>
  <li>凯里·欧文</li><!-- ✅ -->
  <li>凯文·乐福</li>
</ul>

通用兄弟选择器 A ~ B

A ~ B 选中匹配 B 且为匹配 A 的元素的下 N 个相邻元素。

  .cavs .lbj ~ li {
  text-shadow: 1px 1px 5px #ccc;
}
<ul class="cavs">
  <li class="lbj">勒布朗·詹姆斯</li>
  <li>凯里·欧文</li><!-- ✅ -->
  <li>凯文·乐福</li><!-- ✅ -->
</ul>

应用同一规则的选择器组

通过相互间用逗号分隔的多个选择器所形成的组，可以一次性将同一规则同时应用到多组选定元素。例如：

  p, li {
  font-size: 1.6em;
}

或者 ：

  h1, h2, h3, h4, h5, h6 {
  font-family: helvetica, 'sans serif';
}

特别鸣谢 ：饥人谷若愚老师