1.兄弟选择器： ~
该选择器会选择当前元素之后的所有相邻指定元素（具有相同父元素的兄弟元素）；
.p ~ li{
color: blue;
}
<div>
<p class="p">我是p元素</p>
<strong>我是strong元素</strong>
<li>我是li元素</li> /*li元素被选中*/
</div>
2.相邻兄弟选择器： +
该选择器会选择当前元素相邻的第一个兄弟元素（不管指定不指定相邻兄弟元素的类型，都会选择相邻第一个元素，如果没有匹配到则不给定样式）；
.p + li {
color: red;
}
<p class="p">我是p元素</p>
<li>我是紧邻的li元素</li> /*紧邻的li被选中；如果紧邻p元素的的不是li元素，则没有选中任何元素就无法添加指定样式*/
<strong>我是strong元素</strong>
3.子元素选择器： >
该选择器会选择该元素下的指定子元素（只包括子元素，除了子元素以外的后代选择器不被选择）；
.p > li {
color: green;
}
<p class="p">
<strong>我是strong</strong>
<li>我是li1</li> /*被选中*/
<li> /*被选中*/
我是li2
<li>我是p元素的孙子元素li</li> /*作为p元素的孙子元素，不被选中*/
</li>
<span>我是span</span>
</p>