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都變爲粗體，但第一個列表項不受影響。