CSS選擇器總結

 

總結幾種本身比較容易混淆的：

1. 後代選擇器，寫法是 E1 E2，如 ul li，選擇的是全部後代，包括子後代、孫後代…;

2. 子選擇器，寫法 E1 > E2，只選擇子後代，不包括孫後代元素；

3. 相鄰元素選擇器，寫法 E1 + E2，選擇緊跟着E1的E2元素，只會選擇一個元素，若是E一、E2不是緊挨着的不會匹配到；

4. 兄弟選擇器， 寫法 E1 ~ E2 ，選擇E1後面的全部E2類型的元素，在E1簽名的E2不會匹配到；

5. 屬性選擇器：

E[attr] : 只要有attr屬性將被選擇，

E[attr^=value] : 選擇屬性attr值以value開頭的元素，

E[attr$=value] : 選擇屬性attr值以value結尾的元素，

E[attr*=value] : 選擇屬性attr值中含有value的元素，

E[attr~=value] : 選擇attr值以空格分隔後的列表中有value的元素，

E[attr|=value] : 選擇屬性值爲value或者爲 value- 開頭的元素。

6. 僞類

：link 沒有訪問時,在href屬性有值時纔有效果

：vistied 訪問事後

：hover 鼠標停留時

：active 鼠標點擊時，僅在鼠標按住時觸發，鼠標鬆開消失

：focus 成爲焦點時

表單類，主要在表單元素使用：

enabled：可用狀態

disabled：不可用狀態

checked、selected 選中

7. ：nth 類型選擇器，

:first-child選擇某個元素的第一個子元素；

:last-child選擇某個元素的最後一個子元素；

:nth-child()選擇某個元素的一個或多個特定的子元素；

:nth-last-child()選擇某個元素的一個或多個特定的子元素，從這個元素的最後一個子元素開始算；

:nth-of-type()選擇指定的元素；

:nth-last-of-type()選擇指定的元素，從元素的最後一個開始計算；

:first-of-type選擇一個上級元素下的第一個同類子元素；

:last-of-type選擇一個上級元素的最後一個同類子元素；

:only-child選擇的元素是它的父元素的惟一一個了元素；

:only-of-type選擇一個元素是它的上級元素的惟一一個相同類型的子元素；

:empty選擇的元素裏面沒有任何內容。

first-child 和 first-of-type的區別： first-child選中的元素必須是在子元素中的第一位；first-of-type選中的元素是子元素中某種類型元素的第一個，而無論子元素在父元素的位置。

 

8. 僞元素

::before 在元素內部前面插入，結合content ，插入content的內容；

::after 在元素內部後面插入，結合content，插入content的內容；

::first-letter 首字母，經常使用與段落，改變一行文字的首個字母；

::first-line 首行

::selection 鼠標劃過區域的樣式，經常使用與鼠標選擇某段位子時改變默認的樣式。