應該記住的 30 個 CSS 選取器

文章目錄

• 1. *
• 2. #X
• 3. .X
• 4. X Y
• 5. X
• 6. X:visited 和 X:link
• 7. X + Y
• 8. X > Y
• 9. X ~ Y
• 10. X[title]
• 11. X[href="foo"]
• 12. X[href*="akasuna"]
• 13. X[href^="http"]
• 14. X[href$=".jpg"]
• 15. X[data-*="foo"]
• 16. X[foo~="bar"]
• 17. X:checked
• 18. X:after
• 19. X:hover
• 20. X:not(selector)
• 21. X::pseudoElement
• 22. X:nth-child(n)
• 23. X:nth-last-child(n)
• 24. X:nth-of-type(n)
• 25. X:nth-last-of-type(n)
• 26. X:first-child
• 27. X:last-child
• 28. X:only-child
• 29. X:only-of-type
• 30. X:first-of-type
• 結語

refer to:http://www.akasuna.com/2011/04/06/the-30-css-selectors-you-must-memorize/

 

可能你已經學過了 CSS 的 識別碼選取器、類別選取器和後代選取器，但是這就夠了嗎？

可能不太夠，對於 CSS 而言，還有很多靈活的使用方法。

本文將向你介紹一些常用的 CSS 選取器方法，其中有一些是 CSS3 選取器，只有比較新的瀏覽器才支援，但是這些新選取器同樣要記住，因為像 IE6 之類舊瀏覽器終將被淘汰。

OK，開始。

1. *

* {margin: 0;padding: 0;}

此星號將選擇當前頁面內所有標籤，相信很多人都使用過這招來清空瀏覽器預設的 margin 和 padding，如果是在測試的時候，用這招當然沒什麼問題，但是在正式的產品中盡量不要這樣用，據說它會大大加重瀏覽器的負擔，而且也沒必要清空所有標籤的 margin 和 padding。

* 同樣可以作為子選取器使用：

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

以上代碼將為 ID 為 container 容器內所有標籤加上一個像素寬的黑色實線邊框。

2. #X

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

以 # 開頭的選取器允許我們根據 ID 來選擇標籤，這種選取器最為常用。ID 選取器用法比較嚴格，對於一個 HTML 文檔而言，不允許出現 ID 相同的標籤，因此 識別碼選取器只能選擇一個標籤。

3. .X

.error {color: red;}

這個是類別選取器，類別選取器和 識別碼選取器的區別是 HTML 中的類可以重複，也就是說通過類別選取器可以選擇多個標籤，當 HTML 中的多個標籤有共同特性時，可以把他們定義為一個類，這樣在 CSS 中就可以很容易的選擇它們。

4. X Y

li a {text-decoration: none;}

這個一般稱為後代選取器。例如，你並不像選擇所有超連結，而只想選擇 li 標籤中的超連結，就可以用後代選取器。

5. X

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

如果你想通過標籤類型來選擇頁面上的所有標籤，可以使用這種標籤選取器。例如，你想要選擇頁面上所有超連結，可以使用 a { }。

6. X:visited 和 X:link

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

這是偽類別選取器，我們可以使用 a:link 來選擇所有沒被點擊過的超連結，也可以用 :visited 來選擇所有被點擊過或瀏覽過的超連結。

7. X + Y

ul + p {color: red;}

這個可以稱為鄰近選取器，以上面的代碼為例，它只能選擇緊跟著 ul 的 p 標籤，而且只有 ul 後面的第一個 p 會被選中。

8. X > Y

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

X > Y 和 X Y 的不同之處前者只能選擇 X 的直接後代。例如如下標籤：

<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>

基於以上 HTML 程式碼，#container > ul 選取器只能選擇 id 為 container 的 div 下面的 ul，而 li 下面的 ul 卻選擇不到。

9. X ~ Y

ul ~ p {color: red;}

這種選取器和 X + Y 有相似之處，但是又沒有 X + Y 嚴格，對於鄰近選取器（ul + p）而言，只能選擇緊跟著 ul 的第一個 p 標籤，而 ul ~ p 卻可以選擇 ul 後面的所有 p 標籤。

10. X[title]

a[title] {color: green;}

這個稱為屬性選取器，例如上面的代碼，只能選擇出具有 title 屬性的超連結。

11. X[href="foo"]

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

上面的 CSS 代碼，只會選擇連結到 http://akasuna.com 的超連結設定為綠色，而其它超連結則不受影響。如果你想為指向不同網站的超連結指定不同的顏色，這是個好方法。

12. X[href*="akasuna"]

a[href*="akasuna"] {color: #1f6053;}

這種方法更為常見，*= 表示指定的字串必須出現在屬性的值裡面，這樣一來，akasuna.com，demo.akasuna.com，bbs.akasuna.com 甚至是akasuna2.com 都將被此選取器選擇到。

13. X[href^="http"]

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

有些網站會在超連結的旁邊顯示一個表徵圖來表示此連結為外部連結，估計大多數人都見過這樣的設計，此表徵圖用來提醒訪客，點擊此連結將開啟另外一個完全不同的網站。

其實要做到這點也很容易，只要判斷一下超連結位址的開頭部分就行了，如果超連結的 href 屬性是以 http 開頭的，那麼就說明它是外部連結，就像上面的代碼那樣。

注意：我們這裡判斷的是 http 而非http://，一是沒必要，二是為了兼顧 https:// 之情況。

另外，使用這種方法的話，有一個前提，所有內部連結都用相對路徑而非絕對路徑，這樣才能保證內部連結不是以 http 開頭。

如果我們要為那些連結向圖片的超連結設定特定的樣式呢，這種情況就要判斷超連結位址的末尾部分了。

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

a[href$=".jpg"] {color: red;}

使用 $，表示的是字串的末尾部分，這裡我們要尋找那些連結向圖片的超連結，也就是 url 地址是以 .jpg 結尾的那些。注意，這裡沒有考慮 .gif和 .png 的情況。

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

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

接著上面的第 14 條，如果我們兼顧各種圖片格式，例如：png，jpg，jpeg，gif，又該怎麼辦呢？你可能會想到下面這種方法：

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

但是這樣寫起來稍微有點痛苦，而且低效。其實我們這裡可以使用自訂屬性，為所有指向圖片的超連結添加一個屬性 data-filetype，如：

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

然後就可以在 CSS 裡面使用標準的選取器來選擇這些超連結了。

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

16. X[foo~="bar"]

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

參照上面的第 15 條那個自訂屬性，我們可以建立一個 data-info 屬性，這個屬性值可以接收多個值:

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

這樣一來，通過一個屬性就可以表達兩層意思：1. 它是外部連結；2. 它是指向圖片的連結。然後就可以用 CSS 分別對此超連結設定樣式：

/* 選擇 data-info 屬性中包含有 "external" 的那些超連結 */a[data-info~="external"] {color: red;}/* 選擇 data-info 屬性中包含有 "image" 的那些超連結 */a[data-info~="image"] {border: 1px solid black;}

17. X:checked

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

又是一個偽類別選取器，它能選擇那些被選中的標籤，例如單選框、複選框等，用起來應該很簡單。

18. X:after

這個不是偽類，而是虛擬元素，對應的還有 :before，從字面上看，它們分別表示元素的前面和後面，實際上它們的功能是在元素的前面或後面新增內容，需要和 CSS 的 content 屬性配合使用，如：

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

在顯示時，標題內容後會插入一張圖片，這就是虛擬元素 :after 的作用。

19. X:hover

div:hover {background: #e3e3e3;}

拜託，這個大家都會的，它表示當滑鼠在元素上懸停時的樣式。

注意：在老版本 IE 中，這個偽類只對超連結有效，對其它任何元素無效！

常見的用法是，當滑鼠移至上方的找連結上的時候，給超連結設定一個底部邊框：

/* order-bottom: 1px solid black; 的效果看起來比 text-decoration: underline; 要好一些 */a:hover {border-bottom: 1px solid black;}

20. X:not(selector)

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

嗯，這個偽類別選取器比較有用。試想一下，如果你要選擇頁面中除了 id 為 container 之外的所有 div，這段代碼應該就是你想要的。

或者，你想要選擇頁面中除了 p 標籤外的所有標籤：

*:not(p) {color: green;}

但是這應該很少用到。

21. X::pseudoElement

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

我們可以使用虛擬元素（這裡用的是 :: 哦）為元素的某部分設定樣式，例如段落的第一行，或者第一個字母。切忌，這種方法只對區塊層級元素起作用。

為段落的第一個字母設定樣式：

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

這段代碼將為頁面上所有段落設定首字下沉的效果，這種樣式在報紙上經常可以看到。

22. X:nth-child(n)

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

nth-child 偽類別選取器以一個整數作為參數，不包括 0，要從 1 開始。如果你想挑選清單元素中的第 2 個，可以使用 li:nth-child(2)。

這個方法當然也可以用來選擇多個元素，例如 li:nth-child(4n) 就可以用來挑選清單元素中的第 4 個，第 8 個，第 12 個 ……（4 的倍數）。

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

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

如果一個 ul 中的有 400 個條目，而你只想選擇其中的倒數第 2 個，該怎麼辦呢？

相比 li:nth-child(399) 而言，nth-last-child(2) 也許更為適合。

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

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

有時候，你不是想選擇 ul 中的第 3 個 li，而是想選擇第 3 個 ul，而這些 ul 又沒有 id， 該怎麼辦呢？

此時應該使用 nth-of-type(n)，上述代碼將為頁面中的第三個 ul 設定一個 1 個像素的黑色邊框。

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

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

請參照第 23 條中的 nth-last-of-type 自行理解。

26. X:first-child

ul li:first-child {border-top: none;}

這個偽類用來選擇父元素中的第一個子項目，對應的還有 X:last-child。你可以用它來刪除列表中第一個元素和最後一個元素的邊框。

例如，有一個列表，如果列表中每個元素都有一個 border-top 和 border-bottom，那麼第一個元素和最後一個元素的邊框看起來就有點多餘了。

很多人都會想到為第一個元素和最後一個元素分別設定一個 first 和 last 類名稱，然後通過這個類名稱清楚他們的邊框。這樣當然也是可以的，但是用偽類同樣也可以達到效果，具體請看下面的第 27 條。

27. X:last-child

ul > li:last-child {color: green;}

和 first-child 對應，last-child 用來選擇父元素中的最後一個子項目。結合上面的第 26 條，有如下樣本：

HTML 程式碼

<ul><li> List Item </li><li> List Item </li><li> List Item </li></ul>

CSS 代碼

ul {width: 200px;background: #292929;color: white;list-style: none;padding-left: 0;}li {padding: 10px;border-bottom: 1px solid black;border-top: 1px solid #3c3c3c;}

這段 CSS 代碼為列表設定了背景色，消除了 ul 預設的內邊距，並對每個 li 設定了邊框，邊框顏色深於 ul 的背景色。

問題來了，正片上所示，此無序列表的最頂端和最低端也有邊框，這看起來有點不爽。下面我們用 :first-child 和 :last-child 來解決這個問題：

li:first-child {border-top: none;}li:last-child {border-bottom: none;}

效果，最頂端和最低端的邊框沒有了，問題解決了。

28. X:only-child

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

實際上，你可能會發現 only-child 這種偽類並不常用，但是在某些場合，你還非用它不可。

only-child 用來選擇那些是父元素中唯一的子項目的元素（獨生子女！）。例如上面的代碼，如果某個 div 中只有一個段落，那麼這個段落將會以紅色字型顯示，如果有多個段落，則不受影響。

看下面的 HTML 程式碼：

<div><p> My paragraph here. </p></div><div><p> Two paragraphs total. </p><p> Two paragraphs total. </p></div>

這段 HTML 程式碼中，第二個 div 中有 2 個段落，這兩個選取器不會被此選取器選擇到；而第一個 div 中只有 1 個段落，因此這個段落是 only-child，它會以紅色字型顯示。

29. X:only-of-type

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

跟第 28 條類似，都是選擇子項目。區別是：第 28 條中，選擇的是唯一子項目（獨生子女，不管是男的還是女的，反正只有一個）；而第 29 條中，選擇的是某類型的唯一元素（可以有多個孩子，但是性別不能相同，假如是兩男一女，那麼這個唯一女性將被選擇到）。

30. X:first-of-type

first-of-type 偽類選擇的是相同類型元素中的第一個元素。

為了便於理解，不妨來做個測試，請將如下代碼拷貝至文字編輯器中：

<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>

此時，如果讓你用 CSS 選擇 List Item 2，該如何做呢？

方案一：

有多種方法可以達到效果，先來看第一種，使用 first-of-type

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

這段代碼的意思是，先找到頁面中的 ul，找到了 2 個 ul，那麼選擇第 1 個，然後再此無序列表中選擇第 2 個 li。

方案二：

第二種方法是用鄰近選取器

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

找到緊跟著 p 元素的 ul，然後選擇此 ul 中的最後一個 li 即可。

方案三：

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

跟方案一類似，先找到第一個 ul，然後找到其倒數第一個 li。

結語

如果你在使用如 IE 6 之類的低版本瀏覽器，那麼以上有些比較新 CSS 選取器可能不適合。但是不要因為自己使用的是低版本瀏覽器，就不學習這些新的 CSS 選取器，不學的話吃虧的還是自己。這裡有一個瀏覽器安全色性列表，另外你也可以使用 Dean Edward 的 IE9.js 讓你的低版本 IE 支援一些IE9 的特性。

另外，當使用一些如 jQuery 之類的 JS 庫的時候，盡量在使用過程中用標準的 CSS3 選取器，而非 JS 庫自訂的選取器，如果可能的話，JS 庫使用瀏覽器自身的 CSS 解析器，比使用 JS 庫自訂的解析器 速度更快。

本文翻譯自 The 30 CSS Selectors you Must Memorize，並稍作修改。基本上每種選取器都有對應的 DEMO，請至原文查看。