css中“~”（波浪号）、“，”（逗号）、“+”（加号）和“>”（大于号）详解

1. p~ul{
2. 　　 background:#8e8e8e;
3. }
5. <p>段落P </p>
6. <ul>
7. 　　 <li>列表项1 </li>
8. 　　 <li>列表项2 </li>
9. 　　 <li>列表项3 </li>
10. </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;}

　　这个选择器读做：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。｝；

再举个例子，实现下面图片这个效果

代码为

先不看后面的+li，意思就是选择ul中全部的后代li元素，由于后面使用了li+li，因此选择ul中第一个li以后全部的li标签并设置border-top.

总结

1.A>B 表示选择A元素的全部子B元素（只选择第一代）

2.A B   表示选择A元素的全部子B元素（选择在A标签里面全部的B元素，不止第一代）

2.A+B表示HTML中紧随A的B元素：用一个结合符只能选择两个相邻兄弟中的第二个元素

li + li {font-weight:bold;}

上面这个选择器只会把列表中的第二个及后面的li都变为粗体，但第一个列表项不受影响。