轉：30個最常用css選取器解析

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選取器，因為類庫的選取器引擎會通過瀏覽器內建解析它們，這樣會獲得更快的速度。