CSS冷門及難理解的選擇器學習

        日常你們在寫css樣式的時候，大都都是用的幾個經常使用的選擇器，好比類選擇器，後代選擇器，並集選擇器，子選擇器等等。不過最近，我學習了一點冷門的選擇器，發現這些選擇器在特定狀況下很是好用，不只能精簡HTML結構，還能少些不少重複雜亂的css樣式。

 

1、關係選擇器 （兼容iE7+）

1.E+F 相鄰兄弟選擇器：選擇緊鄰E元素後面的F元素；

    

2.E~F 通用選擇器：選擇E元素後面全部的F元素；

      

 

2、動態僞類選擇器（兼容IE8+）

1.E:active   選擇E元素，且該元素被激活；經常使用於錨點和按鈕上。

           

2.E:focus  選擇E元素，且該元素得到了焦點；

注：button的active與focus選擇器區別在於：active是點擊button的時候字體變色，focus是點擊以後字體才變色。

 

3、目標僞類選擇器（兼容IE9+）

E:target  選擇E元素，且該元素被頁面中相關href指向

          

當點擊錨點的時候，p:target 背景變色

 

4、UI元素狀態僞類選擇器（兼容IE9+）

1.E:checked  選中狀態僞類選擇器：匹配選中的單選或多選按鈕表單元素；

點擊單選或多選的時候，選中的元素背景和內容改變。

 

5、結構性僞類選擇器（兼容IE9+）

一、E:only-child  匹配E元素，且E元素的父元素只包含一個子元素；

    

二、E:only-of-type  匹配E元素，且E元素的父元素只包含E同類型的元素，且只有惟一一個；

    

三、E:empty  選擇沒有子元素的E元素，且該元素也不包含任何文本節點；

  

 

6、否認僞類選擇器（兼容IE9+）；

E:not(F)  匹配除F元素外的E元素

   

 

7、屬性選擇器（兼容IE7+）；

1.E[attr |= val ]  匹配E元素，且E元素的屬性具備val或val-開頭的值；

    

2.E[ attr~=val ] 匹配E元素，且E元素屬性具備多個空格分隔的值，其中一個值等於val；

      

3.E[ attr*=val ] 匹配E元素，且E元素屬性值任意位置包含了val的字符串；

    

4.E[ attr^=val ] 匹配E元素，且E元素屬性值開頭位置包含了val字符串；

5.E[ attr$=val ] 匹配E元素，且E元素屬性值結尾位置包含了val字符串。

 

        上面這些冷門選擇器在我最近的項目都使用上了，很是好用，推薦給你們，css選擇器還有不少，但願你們補充。