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;}
　　這個選擇器讀作：“選擇緊接在 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都變為粗體，但第一個列表項不受影響。