轉 30個最經常使用css選擇器解析

你也許已經掌握了id、class、後臺選擇器這些基本的css選擇器。但這遠遠不是css的所有。下面向你們系統的解析css中30個最經常使用的選擇器，包括咱們最頭痛的瀏覽器兼容性問題。掌握了它們，才能真正領略css的巨大靈活性。

1. *

* {
    margin: 0;
    padding: 0;
   }

星狀選擇符會在頁面上的每個元素上起做用。web設計者常常用它將頁面中全部元素的margin和padding設置爲0。 *選擇符也能夠在子選擇器中使用。

#container * {
     border: 1px solid black;
   }

上面的代碼中會應用於id爲container元素的全部子元素中。 除非必要，我不建議在頁面中過的的使用星狀選擇符，由於他的做用域太大，至關耗瀏覽器資源。 兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera

2. #X

#container {
      width: 960px;
      margin: auto;
   }

井號做用域有相應id的元素。id是咱們最經常使用的css選擇器之一。id選擇器的優點是精準，高優先級（優先級基數爲100，遠高於class的10）， 做爲javascript腳本鉤子的不二選擇，一樣缺點也很明顯優先級太高，重用性差，因此在使用id選擇器前，咱們最好問下本身，真的到了非用id選擇 器的地步？ 兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera

3. .X

.error {
     color: red;
   } 

這是一個class(類)選擇器。class選擇器與id選擇器的不一樣是class選擇器能做用於指望樣式化的一組元素。 兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera

4. X Y

li a {
     text-decoration: none;
   } 

這也是咱們最經常使用的一種選擇器——後代選擇器。用於選取X元素下子元素Y，要留意的點是，這種方式的選擇器將選取其下全部匹配的子元素，無視層級，因此有 的狀況是不宜使用的，好比上述的代碼去掉li下的全部a的下劃線，但li裏面還有個ul，我不但願ul下的li的a去掉下劃線。使用此後代選擇器的時候要 考慮是否但願某樣式對全部子孫元素都起做用。這種後代選擇器還有個做用，就是建立相似命名空間的做用。好比上述代碼樣式的做用域明顯爲li。 兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera

5. X

a { color: red; }  
ul { margin-left: 0; } 

標籤選擇器。使用標籤選擇器做用於做用域範圍內的全部對應標籤。優先級僅僅比*高。 兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera

6. X:visited和X:link

a:link { color: red; }   
a:visted { color: purple; } 

使用:link僞類做用於未點擊過的連接標籤。:hover僞類做用於點擊過的連接。 兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera

7. X+Y

ul + p {
      color: red;
   } 

相鄰選擇器，上述代碼中就會匹配在ul後面的第一個p，將段落內的文字顏色設置爲紅色。(只匹配第一個元素) 兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera

8. X>Y

div#container > ul {
     border: 1px solid black;
   } 

<div id="container">
      <ul>
         <li> List Item
           <ul>
              <li> Child </li>
           </ul>
         </li>
         <li> List Item </li>
         <li> List Item </li>
         <li> List Item </li>
      </ul> 
</div>

子選擇器。與後代選擇器X Y不一樣的是，子選擇器只對X下的直接子級Y起做用。在上面的css和html例子中，div#container>ul僅對container中最近一級的ul起做用。從理論上來說X > Y是值得提倡選擇器，惋惜IE6不支持。 兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera

9. X ~ Y

ul ~ p {
      color: red;
   }

相鄰選擇器，與前面提到的X+Y不一樣的是，X~Y匹配與X相同級別的全部Y元素，而X+Y只匹配第一個。 兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera

10. X[title]

a[title] {
      color: green;
   } 

屬性選擇器。好比上述代碼匹配的是帶有title屬性的連接元素。

兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera

11. X[title="foo"]

a[href="http://css9.net"] {
     color: #1f6053; 
} 

屬性選擇器。 上面的代碼匹配全部擁有href屬性，且href爲http://css9.net的全部連接。

這個功能很好，可是多少又有些侷限。若是咱們但願匹配href包含css9.net的全部連接該怎麼作呢？看下一個選擇器。 兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera

12. X[title*="css9.net"]

a[href*="css9.net"] {
     color: #1f6053;
   }

屬性選擇器。正如咱們想要的，上面代碼匹配的是href中包含"css9.net"的全部連接。

兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera

13. X[href^="http"]

a[href^="http"] {
      background: url(path/to/external/icon.png) no-repeat;
      padding-left: 10px;
   } 

屬性選擇器。上面代碼匹配的是href中全部以http開頭的連接。 兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera

13. X[href$=".jpg"]

a[href^="http"] {
      background: url(path/to/external/icon.png) no-repeat;
      padding-left: 10px;
   } 

屬性選擇器。在屬性選擇器中使用$，用於匹配結尾爲特定字符串的元素。在上面代碼中匹配的是全部連接到擴展名爲.jpg圖片的連接。（注意，這裏僅僅是.jpg圖片，若是要做用於全部圖片連接該怎麼作呢，看下一個選擇器。）

兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera

14. X[data-*="foo"]

在上一個選擇器中提到如何匹配全部圖片連接。若是使用X[href$=".jpg"]實現，須要這樣作：

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
     color: red;
  } 

看上去比較麻煩。另外一個解決辦法是爲全部的圖片連接加一個特定的屬性，例如‘data-file’

html代碼

<a href="path/to/image.jpg" data-filetype="image"> 圖片連接 </a> 

css代碼以下：

a[data-filetype="image"] {
      color: red;
   } 

這樣全部連接到圖片的連接字體顏色爲紅色。

兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera

15. X[foo~="bar"]

屬性選擇器。屬性選擇器中的波浪線符號可讓咱們匹配屬性值中用空格分隔的多個值中的一個。看下面例子：

html代碼

<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a> 

css代碼

a[data-info~="external"] {
      color: red;
   }
a[data-info~="image"] {
      border: 1px solid black;
   } 

在上面例子中，匹配data-info屬性中包含「external」連接的字體顏色爲紅色。匹配data-info屬性中包含「image」的連接設置黑色邊框。

兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera

17. X:checked

checked僞類用來匹配處於選定狀態的界面元素，如radio、checkbox。

input[type=radio]:checked {
      border: 1px solid black;
   } 

上面代碼中匹配的是全部處於選定狀態的單選radio，設置1px的黑色邊框。

兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera

18. X:after和X:before

這兩個僞類與content結合用於在元素的前面或者後面追加內容，看一個簡單的例子：

h1:after {content:url(/i/logo.gif)} 

上面的代碼實現了在h1標題的後面顯示一張圖片。

咱們也常常用它來實現清除浮動，寫法以下：

.clearfix:after {
       content: "";
       display: block;
       clear: both;
       visibility: hidden;
       font-size: 0;
       height: 0; 
      }       
.clearfix {
      *display: inline-block; 
     _height: 1%;
   }

19. X:hover

div:hover {
     background: #e3e3e3;
   } 

:hover僞類設定當鼠標劃過期元素的樣式。上面代碼中設定了div劃過期的背景色。

須要注意的是，在ie 6中，:hover只能用於連接元素。

這裏分享一個經驗，在設定連接劃過期出現下滑線時，使用border-bottom會比text-decoration顯得更漂亮些。代碼以下：

a:hover {
    border-bottom: 1px solid black;
   } 

兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera

20. X:not(selector)

div:not(#container) {
      color: blue;
   } 

否認僞類選擇器用來在匹配元素時排除某些元素。在上面的例子中，設定除了id爲container的div元素字體顏色爲blue。

兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera

21. X::pseudoElement

::僞類用於給元素片斷添加樣式。好比一個段落的第一個字母或者第一行。須要注意的是，這個::僞類只能用於塊狀元素。

下面的代碼設定了段落中第一個字母的樣式：

p::first-letter {
      float: left;
      font-size: 2em;
      font-weight: bold;
      font-family: cursive;
      padding-right: 2px;
   } 

下面的代碼中設定了段落中第一行的樣式：

p::first-line {
      font-weight: bold;
      font-size: 1.2em; 
  } 

兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera

（IE6居然支持，有些意外啊。）

22. X:nth-child(n)

li:nth-child(3) {
      color: red;
   } 

這個僞類用於設定一個序列元素（好比li、tr）中的第n個元素（從1開始算起）的樣式。在上面例子中，設定第三個列表元素li的字體顏色爲紅色。

看一個更靈活的用法，在下面例子中設定第偶數個元素的樣式，能夠用它來實現隔行換色：

tr:nth-child(2n) {
      background-color: gray;
   } 

兼容瀏覽器：IE9+、Firefox、Chrome、Safari

23. X:nth-last-child(n)

li:nth-last-child(2) {
      color: red;
   } 

與X:nth-child(n)功能相似，不一樣的是它從一個序列的最後一個元素開始算起。上面例子中設定倒數第二個列表元素的字體顏色。

兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera

24. X:nth-of-type(n)

ul:nth-of-type(3) {
      border: 1px solid black;
   } 

與X:nth-child(n)功能相似，不一樣的是它匹配的不是某個序列元素，而是元素類型。例如上面的代碼設置頁面中出現的第三個無序列表ul的邊框。

兼容瀏覽器：IE9+、Firefox、Chrome、Safari

25. X:nth-last-of-type(n)

ul:nth-last-of-type(3) { border: 1px solid black; }

與X:nth-of-type(n)功能相似，不一樣的是它從元素最後一次出現開始算起。上面例子中設定倒數第三個無序列表的邊框

兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera

26. X:first-child

:first-child僞類用於匹配一個序列的第一個元素。咱們常常用它來實現一個序列的第一個元素或最後一個元素的上（下）邊框，如：

ul:nth-last-of-type(3) {
      border: 1px solid black;
   } 

兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera

27. X:last-child

ul > li:last-child {
      border-bottom:none;
  }

與:first-child相似，它匹配的是序列中的最後一個元素。

兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera

28. X:only-child

div p:only-child {
      color: red;
   }

這個僞類用的比較少。在上面例子中匹配的是div下有且僅有一個的p，也就是說，若是div內有多個p，將不匹配。

<div><p> My paragraph here. </p></div>

<div>
      <p> Two paragraphs total. </p>
      <p> Two paragraphs total. </p>
</div>

在上面代碼中第一個div中的段落p將會被匹配，而第二個div中的p則不會。

兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera

29. X:only-of-type

li:only-of-type {
      font-weight: bold;
   } 

這個僞類匹配的是，在它上級容器下只有它一個子元素，它沒有鄰居元素。例如上面代碼匹配僅有一個列表項的列表元素。

兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera

30. X:first-of-type

:first-of-type僞類與:nth-of-type(1)效果相同，匹配出現的第一個元素。咱們來看個例子：

<div>
      <p> My paragraph here. </p>
      <ul>
         <li> List Item 1 </li>
         <li> List Item 2 </li>
      </ul>
      <ul>
         <li> List Item 3 </li>
         <li> List Item 4 </li>
      </ul> 
</div>

在上面的html代碼中，若是咱們但願僅匹配List Item 2列表項該如何作呢：

方案一：

ul:first-of-type > li:nth-child(2) {
      font-weight: bold; 
  } 

方案二：

p + ul li:last-child {
      font-weight: bold;
   } 

方案三：

ul:first-of-type li:nth-last-child(1) {
      font-weight: bold;
   } 

兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera。

總結：

若是你正在使用老版本的瀏覽器，如IE 6，在使用上面css選擇器時必定要注意它是否兼容。不過，這不該成爲阻止咱們學習使用它的理由。在設計時，你能夠參考瀏覽器兼容性列表，也能夠經過腳本手段讓老版本的瀏覽器也支持它們。

另外一點，咱們在使用javascript類庫的選擇器時，例如jquery，要儘量的使用這些原生的css3選擇器，由於類庫的選擇器引擎會經過瀏覽器內置解析它們，這樣會得到更快的速度。