css操作符

p~ul{
　　 background:#8e8e8e;
}
<p>段落P</p>
<ul>
　　 <li>列表项1</li>
　　 <li>列表项2</li>
　　 <li>列表项3</li>
</ul>
p~ul选择前面有<p>元素的每个<ul>元素，即选择p之后出现的所有ul，两种元素必须拥有相同的父元素，但ul不必紧随p。

css中“>”是css3中特有的选择器，A>B表示选择A元素的所有子B元素，与A B不同的是，A B选择所有后代元素，为A>B只选择一代。

A B{}选择A所有的后代B元素

A>B{}选择A的一代B元素

A+B{}这个+是选择相邻兄弟，称作“相邻兄弟选择器”，如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器，例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

　　h1 + p {margin-top:50px;}
 

来源：oschina

链接：https://my.oschina.net/carbenson/blog/3164706