选取指定元素的后代元素
与子元素选择器相比，后代选择器选取的不一定是直接后代（儿子），而是作用于所有后代元素（儿子、孙子、重孙…）都可以。
实例：（选取类为 box的元素的 id为aa后代元素）
HTML
<div class="box">
<p>emmmmmmmmmm……</p>
<p>23333333333333333……</p>
<div>
<p>wwwwwwwwwwww</p>
<p id="aa">QQQQQQQQQQ</p>
</div>
</div>
CSS
.box #aa{ background: #aaf; }
选取某个元素的直接后代元素
与后代元素选择器相比，后代选择器选取的一定是直接后代（儿子）
实例：（选取所有类为box的元素，后代p元素）
HTML
<div class="box">
<p>emmmmmmmmmm……</p>
<p>23333333333333333……</p>
<div>
<p>wwwwwwwwwwww</p>
<p id="aa">QQQQQQQQQQ</p>
</div>
</div>
CSS
.box>p{ background: #aaf;}
选择紧连着另一元素后的元素，二者具有相同的父元素。只会选择的一个相邻的匹配元素
实例：（选取h1后面的h2元素）
HTML
<div class="box">
<h1>ssssssssssssssss</h1>
<h2>emmmmmmmmmm……</h2>
<h2>23333333333333333……</h2>
<div>
<p>wwwwwwwwwwww</p>
<p id="aa">QQQQQQQQQQ</p>
</div>
</div>
CSS
h1+h2{ background: #aaf; }
选取所有指定元素之后的相邻兄弟元素。
与相邻兄弟元素选择器相比，相邻兄弟元素仅仅是选择紧跟着的兄弟元素，后续元素选择器选择所有符合条件的兄弟元素
实例：（选取h1元素后的所有，相邻的兄弟元素h2元素）
HTML
<div>
<h1>ssssssssssssssss</h1>
<h2>emmmmmmmmmm……</h2>
<p>wwwwwwwwwwww</p>
<h2>23333333333333333……</h2>
<div>
CSS
h1~h2{ background: #aaf; }
原文：https://www.cnblogs.com/nyw1983/p/11628364.html