CSS 選擇器是一種模式，用於選擇需要添加樣式的元素。平時使用最多也是最簡單的就是 #id、.class 和標簽選擇器，在 CSS 中還有很多更加強大更加靈活的選擇方式，尤其是在 CSS3 中，增加了很多新的選擇器，使得選擇元素更加便捷，所以必須理解這些選擇器，只有先理解了，多用幾次，自然而然就記住了。
1、* 【CSS2】
通配符，選擇頁面所有元素。
1 *{ 2 margin:0; 3 padding:0; 4 }
上面代碼的作用是把頁面上所有元素的內外邊距設置為 0，這是最基本的清除默認 CSS 樣式的方法。在平時練習時使用這個沒問題，但在實際的項目中不建議使用，可以使用世界級專家 Eric Meyer 的 CSS Reset 方案來重置瀏覽器默認樣式，也可以使用 Normalize.css， CSS reset 和 Normalize 存着着根本理念上的差異，前者是將所有瀏覽器自帶的樣式重置掉，以確保各瀏覽器渲染的一致性，而后者則是盡量保留瀏覽器的默認樣式，是一個可定制的 CSS 文件，使瀏覽器渲染所有元素更加一致，符合現代標准，Bootstrap 就使用了該方案。也可以百度參考各大網站 CSS 代碼初始化樣式。
* 也可以用來選擇某元素的所有子元素。
1 #box *{ 2 background-color:blue; 3 }
上面的代碼，會選則 ID 為 box 下的所有元素。
2、#ID 【CSS1】
ID 選擇器，選擇具有指定 id 屬性的元素。
1 #content{ 2 width:960px; 3 margin:0 auto; 4 }
ID 就像身份證一樣，具有唯一性，所以 ID 選擇器是 CSS 中效率最高的選擇器。
3、.Class 【CSS1】
類選擇器，選擇具有指定類的所有元素。
1 .main{ 2 color:red; 3 }
class 選擇器和 id 選擇器不同的是，一個頁面可以有多個 class，並且 class 可以在不同的標簽中使用，如果樣式相同的話。當你想對多個元素設置樣式時就可以使用 class，而只是對某個特定的元素設置樣式那就使用 id。
(1)、什么時候使用 ID，什么時候使用 Class
ID 和 Class 最主要的區別就在於 ID 不能重復，只能使用一次，一個 ID 只能用於一個標簽。而 Class 可以重復使用，同一個 Class 可以定義在多個標簽上，且一個標簽可以定義多個 Class。簡單理解，就是 ID 只能調用一次，而 Class 可以調用無數次。
在同一個頁面中只出現一次的塊可以使用 ID 定義，比如網站的布局：頭部、主體、側邊欄和頁腳等。ID 主要用於特殊的元素，針對性強。
而 Class 是一個集體聲明，當相同樣式應用於很多元素時，則使用 Class 定義。在一個網站中，需要調用的公用類比較多，所以使用 Class 可以寫一些公用類，在使用時調用就可以了。
總結：只有一個獨立樣式的元素用 ID，而多個元素擁有相同樣式時用 Class。
另外，document 的方法中 getElementById() 這個方法只能調用指定 ID 屬性的元素，因此當頁面中用到 JS 或者要動態調用對象時，就要用到 ID。當然也可以通過標簽名、name 屬性獲取元素，還可以通過元素的 className 來獲取元素，所以還是要根據實際的需求來決定使用哪個。如果一個元素使用 JS 進行交互，在命名時，可以在名稱前邊加上一個 J，這樣能增強代碼的可讀性，在頁面量大的情況下，便於調用，但不能使用加了 J 的名稱來定義 CSS 樣式。
4、X 【CSS1】
標簽選擇器，選擇指定標簽名稱的所有元素。
1 a{ 2 text-decoration:none; 3 }
如果你想讓頁面上所有指定標簽的樣式改變，可以直接使用標簽選擇器。
5、X, Y 【CSS1】
分組選擇器，在樣式表中具有相同樣式的元素，就可以使用分組選擇器，把所有元素組合在一起，元素之間用逗號分隔，這樣只需要定義一組 CSS 聲明。
1 h1, h2, h3, h4, h5, h6 ,p{ 2 color:red; 3 }
上面的代碼，選擇頁面上所有 h1 - h6 元素以及段落。
6、X Y 【CSS1】
后代選擇器，選擇指定元素內部的所有子元素，包括子元素、孫元素、曾孫元素等等。
1 li a{ 2 text-decoration:none; 3 }
如果你想選擇更加具體的元素，就可以使用后代選擇器。比如：並不需要去掉頁面中所有鏈接的下划線，而只是去掉所有列表鏈接的下划線，這時就可以使用后代選擇器。
7、X > Y 【CSS2】
子元素選擇器，選擇指定父元素的所有直接子元素，不包括孫元素、曾孫元素等等。
1 div > ul{ 2 border:1px solid black; 3 }
如果不希望選擇任意的后代元素，而只是選擇某個元素的子元素，那么就使用子元素選擇器。
X Y 和 X > Y 的區別：前者作用於指定元素的所有后代元素，而后者只作用於指定元素的第一代后代，即直接子元素。
8、X + Y 【CSS2】
相鄰兄弟選擇器，選擇相同父元素下，緊跟着指定元素之后的兄弟元素。
1 ul + p{ 2 color:red; 3 }
上面的代碼，選擇所有相同父元素下緊跟着 ul 元素之后的第一個 p 元素。
9、X ~ Y 【CSS3】
普通兄弟選擇器，選擇相同父元素下，指定元素后的所有兄弟元素。
1 ul ~ p{ 2 color:red; 3 }
上面的代碼，選擇所有相同父元素下 ul 元素之后的每一個 p 元素。
與相鄰兄弟選擇器不同，普通兄弟選擇器，兄弟元素不必緊跟在指定元素的后面，並且選擇指定元素后面所有的兄弟元素。
10、X[attr] 【CSS2】
屬性選擇器，選擇所有指定屬性的元素。
1 a[target]{ 2 background-color:red; 3 }
上面的代碼，選擇所有帶有 target 屬性的 a 元素。那些沒有此屬性的錨點將不會應用此樣式。
11、X[attr=value] 【CSS2】
屬性和值選擇器，選擇所有指定屬性和值的元素。
1 a[target=_blank]{ 2 background-color:red; 3 }
上面的代碼，選擇所有屬性為 target="_blank" 的 a 元素。只應用於在新標簽頁打開的鏈接，其他錨點將不受影響。
12、X[attr~=value] 【CSS2】
這個選擇器用於選擇屬性值包含一個指定單詞的元素。~ 符號可以選擇指定屬性值是空格分隔多值的元素。
1 img[title~=flower]{ 2 border:2px solid blue; 3 }
上面的代碼，選擇所有帶有 title 屬性值包含 flower 單詞的 img 元素。
13、X[attr|=value] 【CSS2】
這個選擇器用於選擇屬性以指定值開始的元素。
注意：該值必須是整個單詞，無論是單獨的像 lang="en"，或者像連字符（-）連接的如 lang ="en-us" 都可以。
1 [class|=test]{ 2 background-color:yellow; 3 }
上面的代碼，選擇所有 class 屬性以 test 開頭的元素。
在 CSS2 中定義的 ~=、|= 和在 CSS3 中定義的 *=、^=、$= 之間的區別：
~= 和 *= 都可以選擇屬性值包含指定值的元素，前者必須是一個獨立的單詞，比如 test-a 和 test a 可以被選中，而 testa 不能被選中。而后者這三個都可以選中，只要是值的子串就可以了。
其他選擇器和上面的原理相同，即 |= 和 ~= 特性相同，^=、$= 和 *= 特性相同。
14、X[attr*=value] 【CSS3】
這個選擇器匹配元素屬性值包含指定值的元素。該選擇器類似於與上面的選擇器，但是比上面的選擇器更強大更靈活。* 符號可以選擇指定屬性值包含子字符串的元素，也就說，只要屬性值中帶有指定的值，無需是一個單詞，無需空格分開，就可以匹配。
1 div[class*="test"]{ 2 background-color:red; 3 }
上面的代碼，選擇所有 class 屬性的值包含子字符串 "test" 的 div 元素。
DEMO：注意觀察下面代碼，各元素 title 屬性的定義以及所使用的選擇器，在頁面截圖中對比這兩個選擇器的區別：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>屬性包含選擇器的區別</title> 6 <style> 7 *{ 8 margin:0; 9 padding:0; 10 } 11 img{ 12 width:90px; 13 height:90px; 14 } 15 16 img[title~=boy]{ 17 border:5px solid blue; 18 } 19 20 img[title*=girl]{ 21 border:5px solid red; 22 } 23 24 img[title~=boy]{ 25 width:60px; 26 height:60px; 27 } 28 29 img[title*=girl]{ 30 width:120px; 31 height:120px; 32 } 33 </style> 34 </head> 35 <body> 36 <img src="images/1.jpg" title="xxgirl-a" alt=""> 37 <img src="images/2.jpg" title="boy a" alt=""> 38 <img src="images/3.jpg" title="xxgirloo-b" alt=""> 39 <img src="images/4.jpg" title="boy-b" alt=""> 40 </body> 41 </html>
在 Chrome 中顯示如下：
X[attr*=value] 選擇器那是相當強大的，在某些時候將顯得尤為重要，比如頁面中有很多不同的鏈接地址時，想要更改某一域名相同的鏈接的樣式時，使用這個選擇器那簡直是沒誰了。
1 a[href*="ximo"]{ 2 background-color:red; 3 font-size:20px; 4 }
上面的代碼，就指定了所有 href 屬性值中包含 ximo 的鏈接的樣式，那不管它是 http 的 ximo 還是 https 的 ximo，也不管它是 ximo.com 還是 ximo.cn，更不管它是 ximo.com/index.php?postid=1234567 還是 ximo.com/#zh/a%b%C%2B，只要該屬性值中包含 ximo，統統吃掉，是統統都改變樣式。
強大固然好，但往往太強大的東西，就有可能超出控制，所以使用這個選擇器還得小心行事，避免造成不必要的結果。比如這樣的：http://www.domo.com/ximo 也會匹配。
15、X[attr^=value] 【CSS3】
這個選擇器用於匹配元素屬性值帶有指定的值開始的元素。
1 a[href^="https"]{ 2 background-color:red; 3 }
上面的代碼，選擇所有 href 屬性的值以 "https" 開頭的 a 元素。
16、X[attr$=value] 【CSS3】
這個選擇器匹配元素屬性值帶有指定的值結尾的元素。
1 img[src$=".png"]{ 2 border:2px solid red; 3 }
上面的代碼，選擇所有 src 屬性的值以 ".png" 結尾的 img 元素。
17、:link 和 :visited 【CSS1】
偽類選擇器。
:link 選擇所有未訪問的鏈接。
:visited 選擇所有訪問過的鏈接。
1 a:link{ 2 color:red; 3 } 4 a:visited{ 5 color:purple; 6 }
上面的代碼，所有未訪問的鏈接顯示為紅色，所有訪問過的鏈接顯示為紫色。
18、:active 【CSS1】
偽類選擇器。
用於選擇活動的鏈接，當鼠標點擊一個鏈接時，他就會成為活動鏈接，該選擇器主要用於向活動鏈接添加特殊樣式。
1 a:active{ 2 background-color:yellow; 3 }
上面的代碼，當點擊頁面每個鏈接時，顯示黃色背景色。
19、:target 【CSS3】
偽類選擇器。
用於選擇當前活動的目標元素。
1 #news:target{ 2 background-color:yellow; 3 }
上面代碼，選擇當前活動的 ID 為 #news 的元素，#news 即包含該錨名稱的點擊的 URL。
URL 帶有 ＃ 錨的名稱，指向文檔中一個具體的元素，即鏈接到某個元素的 URL，這個被鏈接的元素就是目標元素（target element）。
下面的例子，突出顯示活動的 HTML 錨：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>:target</title> 6 <style> 7 :target{ 8 border:2px solid red; 9 background-color:#CFCFCF; 10 } 11 </style> 12 </head> 13 <body> 14 <h1>我是大標題</h1> 15 16 <p><a href="#news1">跳轉至內容 1</a></p> 17 <p><a href="#news2">跳轉至內容 2</a></p> 18 19 <p>點擊上面的鏈接，:target 選擇器會突出顯示當前活動的 HTML 錨。</p> 20 21 <p id="news1"><b>內容 1 ...</b></p> 22 <p id="news2"><b>內容 2 ...</b></p> 23 </body> 24 </html>
注意：IE9+ 以及所有瀏覽器都支持該選擇器，IE8 以及更早版本的瀏覽器不支持。
在 Chrome 中顯示如下：
20、:hover 【CSS1】
偽類選擇器。
:hover 用於當鼠標移入鏈接時添加的特殊樣式。
:hover 選擇器可用於所有元素，不僅是鏈接，主要用於定義鼠標滑過效果。
1 div:hover{ 2 background-color:pink; 3 } 4 a:hover{ 5 border-bottom: 1px solid red; 6 }
上面的代碼，當鼠標移入所有 div 元素時顯示粉色背景色，當鼠標移入所有鏈接時顯示 1 像素的底邊框。
21、:before 和 :after 【CSS2】
偽元素選擇器，在網上有很多創造性用法，主要用於在指定元素周圍生成一些內容。
:before 和 :after 這倆小伙伴，用於在指定元素之前和之后插入內容，使用 content 屬性來指定要插入的內容，具體應用可以點這里。
(1)、:before
配合 CSS 的 content 屬性在指定元素之前插入內容。
1 p:before{ 2 content:"看這里 - "; 3 color:red; 4 font-weight:bold; 5 }
上面的代碼，在所有段落之前插入 “看這里 - ”並顯示為紅色的粗體字。
(2)、:after
配合 CSS 的 content 屬性在指定元素之后插入內容。
該偽元素有一個比較神奇的創造性用法，那就是 clearfix:after，即清除浮動。
在 CSS 中，浮動會使元素向左或向右移動，直到他的外邊緣碰到包含框或另一個浮動框的邊框為止，其周圍的元素也會重新排列。浮動元素之后的元素將圍繞它，由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。簡單理解就是，浮動元素脫離了文檔流，包圍圖片和文本的 div 不占據空間。如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>浮動問題</title> 6 <style> 7 *{ 8 margin:0; 9 padding:0; 10 } 11 #box{ 12 border:2px solid red; 13 width:800px; 14 } 15 .float{ 16 width:200px; 17 height:200px; 18 float:left; 19 background:#9C9C9C; 20 margin-right:10px; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="box" class="clearfix"> 26 <div id="" class="float"> 27 </div> 28 <div id="" class="float"> 29 </div> 30 <p>浮動元素脫離了文檔流，包圍圖片和文本的 div 不占據空間。</p> 31 <img src="images/1.jpg" width="90px" height="90px" alt=""> 32 </div> 33 <img src="images/4.jpg" alt=""> 34 </body> 35 </html>
在 Chrome 中顯示如下：
如上圖所示，容器內部使用了浮動，浮動的父層不會跟着浮動框的高度增加而增加，浮動元素脫離了文檔流，包圍圖片和文本的 div 不占據空間。在 IE、Firefox 等符合 W3C 的標准瀏覽器中，如果有一個 DIV 作為外部容器，內部的 DIV 如果設置了 float 樣式，則外部的容器 DIV 因為內部沒有 clear，導致不能被撐開。如下所示：
要解決浮動問題，可以給父容器設置 overflow:hidden; 屬性，父容器的高度可被自動撐開。現在讓我們來了解一下更高級的用法，即使用 :after 偽元素來清除浮動。上面的例子中，給父容器設置了一個 class 類 clearfix，現在給他應用如下樣式：
1 .clearfix:after{ 2 content:" "; 3 display:block; 4 height:0; 5 clear:both; 6 }
在 Chrome 中顯示如下：
可以看到父容器高度被撐開了，這就是 clearfix:after 清除浮動的應用，他的原理是：創建一個內容為空高度為0的塊來為目標元素清除浮動。在標准瀏覽器下，.clearfix:after 會在應用到 clearfix 的元素后面插入一個 clear:both 的塊級元素，從而達到清除浮動的作用。這樣在需要清除浮動時，只要聲明一個 .clearfix，然后在需要清浮動的元素中添加 clearfix 類名就好了。
22、:focus 【CSS2】
這個選擇器用於選擇具有焦點的元素，該選擇器接受鍵盤事件或其他用戶輸入的元素。
1 input:focus{ 2 background-color:yellow; 3 }
上面的代碼，當輸入域獲得焦點時顯示為黃色背景。
23、:first-child 【CSS2】和 :last-child 【CSS3】
(1)、:first-child
:first-child 選擇器匹配父元素中第一個子元素。如果不是指定的子元素，則匹配失敗。
p:first-child 等同於 p:nth-child(1)。
1 p:first-child{ 2 color:red; 3 }
上面代碼，選擇所有相同父元素中第一個 p 元素。
(2)、:last-child
:last-child 選擇器匹配父元素中最后一個子元素。如果不是指定的子元素，則匹配失敗。
p:last-child 等同於 p:nth-last-child(1)。
1 p:last-child{ 2 background:red; 3 }
上面的代碼，選擇所有相同父元素中最后一個 p 元素。
一、他們有什么區別呢？
:first-child 和 :first-of-type 這兩個選擇器都可以選擇父元素中的第一個子元素，
:last-child 和 :last-of-type 這兩個選擇器都可以選擇父元素中最后一個子元素。
用 :first-child 和 :first-of-type 做比較：
:first-child 是在 CSS2 中定義的，:first-of-type 是在 CSS3 中定義的。
前者用於匹配相同父元素下第一個子元素，而后者是匹配指定類型的第一個子元素。如下：
1 <div> 2 <p>我是第一個子元素</p> 3 <h1>我是第二個子元素</h1> 4 <span class="">第三個子元素</span> 5 <span class="">第四個子元素</span> 6 </div>
:first-child
p:first-child 匹配到 p 元素，因為 p 元素是 div 的第一個子元素。
h1:first-child 匹配失敗，因為 h1 是 div 的第二個子元素，而不是第一個。
span:first-child 匹配失敗，因為這兩個 span 元素都不是 div 的第一個子元素。
:first-of-type
p:first-of-type 匹配到 p 元素，因為 p 是 div 中所有類型為 p 的子元素中的第一個。
h1:first-of-type 匹配到 h1 元素，因為 h1 是 div 中所有類型為 h1 的子元素中的第一個。
span:first-of-type 匹配到第三個子元素 span，上面代碼中 div 有兩個類型為 span 的子元素，該選擇器匹配它們中的第一個。
總結： :first-child 匹配相同父元素的第一個子元素，即結構上的第一個子元素。而 :first-of-type 匹配的是相同父元素下同類型子元素中的第一個，該選擇器主要指定的是同類型，不再限制是第一個子元素，只要是指定類型的元素中第一個就行了。
:last-child 和 :last-of-type 都是在 CSS3 中定義的，他們的區別與上面總結的原理相同。
24、:first-of-type 和 :last-of-type 【CSS3】
(1)、:first-of-type
:first-of-type 匹配相同父元素的第一個指定類型的子元素，簡單理解就是選擇指定元素的第一個兄弟元素。等同於 :nth-of-type(1)。
1 li:first-of-type{ 2 background-color:red; 3 }
上面的代碼，選擇所有列表（無序列表和有序列表）中第一個列表項。
(2)、:last-of-type
:last-of-type 匹配相同父元素的最后一個指定類型的子元素，簡單理解就是選擇指定元素的最后一個兄弟元素。等同於 :nth-last-of-type(1)。
1 li:last-of-type{ 2 background-color:red; 3 }
上面的代碼，選擇所有列表中最后一個列表項。
注意：IE9+ 以及所有瀏覽器都支持這兩個選擇器，IE8 以及更早版本不支持。
25、:nth-of-type(n) 和 :nth-last-of-type(n) 【CSS3】
(1)、:nth-of-type(n)
:nth-of-type(n) 匹配相同父元素的第 N 個指定類型的子元素，也可以理解為選擇指定元素的第 N 個兄弟元素。
1 p:nth-of-type(2){ 2 background-color:red; 3 }
上面的代碼，選擇所有同級 p 元素的第 2 個兄弟元素，即相同父元素下第 2 個 p 元素。
(2)、:nth-last-of-type(n)
:nth-last-of-type(n) 匹配相同父元素的倒數第 N 個指定類型的子元素，也可以理解為選擇指定元素的倒數第 N 個兄弟元素。
1 p:nth-last-of-type(2){ 2 background:red; 3 }
上面的代碼，選擇所有同級 p 元素的倒數第 2 個兄弟元素，即相同父元素下的倒數第 2 個 p 元素。
注意：在 JS 中元素的下標是從 0 開始計算的，而在 CSS 選擇器中是正常計算的，即從 1 開始。
IE9+ 以及所有瀏覽器都支持這兩個選擇器，IE8 以及更早版本不支持。
26、:nth-child(n) 和 :nth-last-child(n) 【CSS3】
(1)、:nth-child(n)
:nth-child(n) 匹配父元素中的第 N 個子元素，不論元素的類型。如果第 N 個不是指定的子元素，則匹配失敗。
1 li:nth-child(2){ 2 color:red; 3 }
上面的代碼，選擇所有列表的第 2 個列表項。
(2)、:nth-last-child(n)
:nth-last-child(n) 匹配父元素中的倒數第 N 個子元素，不論元素的類型。如果倒數第 N 個不是指定的子元素，則匹配失敗。
1 li:nth-last-child(2){ 2 color:red; 3 }
上面的代碼，選擇所有列表的倒數第 2 個列表項。
注意：IE9+ 以及所有瀏覽器都支持這兩個選擇器，IE8 以及更早版本不支持。
一、25 和 26 所列的這 4 個選擇器都可以選擇父元素中的子元素，那他們到底有嘛區別呢？
:nth-of-type 和 :nth-child，其實區別也很簡單，從字面量就可以看出，前者為什么要是 of-type，因為他們是以 "type" 來區分的。也就是說：X:nth-of-type(n) 是指父元素下第 N 個指定類型的子元素。而 X:nth-child(n) 是指父元素下第 N 個元素，且這個元素是指定的元素，若不是，則匹配失敗。 看下面的例子：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>:nth-of-type 和 :nth-child</title> 6 <style> 7 /* 選擇第 3 個類型為 p 的子元素，顯示為藍色背景 */ 8 p:nth-of-type(3){ 9 background:blue; 10 } 11 /* 選擇倒數第 3 個類型為 p 的子元素，顯示為綠色背景 */ 12 p:nth-last-of-type(3){ 13 background:green; 14 } 15 16 /* 選擇第 3 個子元素 p，紅色背景，失敗 */ 17 p:nth-child(3){ 18 background:red; 19 } 20 21 /* 選擇倒數第 3 個子元素 p，黃色背景，失敗 */ 22 p:nth-last-child(3){ 23 background:yellow; 24 } 25 </style> 26 </head> 27 <body> 28 <div> 29 <p>我是第一個段落</p> 30 <p>我是第二個段落</p> 31 <ul> 32 <li>列表 1</li> 33 <li>列表 2</li> 34 </ul> 35 <p>我是第三個段落</p> 36 <p>我是第四個段落</p> 37 </div> 38 </body> 39 </html>
在 IE 中顯示如下：
二、這 4 個選擇器也可以叫做奇偶選擇器，參數 n 可以是一個數字，一個關鍵字，或者一個公式。
①、關鍵字
奇數（odd）和偶數（even）可以作為關鍵字使用，可用於匹配索引是奇數或偶數的子元素，第一個子元素的下標是 1。
下面的例子，為奇數和偶數的列表項指定兩種不同的背景色：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>奇偶</title> 6 <style> 7 li:nth-of-type(odd){ 8 background:red; 9 } 10 li:nth-of-type(even){ 11 background:blue; 12 } 13 </style> 14 </head> 15 <body> 16 <ul> 17 <li>列表 1</li> 18 <li>列表 2</li> 19 <li>列表 3</li> 20 <li>列表 4</li> 21 <li>列表 5</li> 22 <li>列表 6</li> 23 <li>列表 7</li> 24 <li>列表 8</li> 25 <li>列表 9</li> 26 </ul> 27 </body> 28 </html>
在 Chrome 中顯示如下：
②、公式
使用公式 (an+b)，a 代表一個循環的大小，N 是一個計數器（從0開始），b 是偏移值。
上面的例子，使用了關鍵字設置奇偶數，也可以使用公式來完成：
1 li:nth-of-type(2n-1){ /* 奇數行 */ 2 background:red; 3 } 4 li:nth-of-type(2n){ /* 偶數行 */ 5 background:blue; 6 }
下面的代碼，指定下標是 3 的倍數的所有列表項背景色：
1 li:nth-of-type(3n){ 2 background:red; 3 }
在 Chrome 中顯示如下：
27、:only-of-type 和 :only-child 【CSS3】
(1)、:only-of-type
:only-of-type 匹配屬於同類型中唯一的同級元素。
(2)、:only-child
:only-child 匹配屬於父元素中唯一子元素的元素。
下面的例子，是他們的區別：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>:only-of-type 和 :only-child</title> 6 <style> 7 p:only-of-type{ 8 background:green; 9 } 10 p:only-child{ 11 color:white; 12 } 13 </style> 14 </head> 15 <body> 16 <div> 17 <p>我是父元素下唯一的段落。</p> 18 </div> 19 20 <div> 21 <p>我是第一個段落，我還有個列表兄。</p> 22 <ul> 23 <li>列表 1</li> 24 <li>列表 2</li> 25 </ul> 26 </div> 27 </body> 28 </html>
在 IE 中顯示如下：
注意：IE9+ 以及所有瀏覽器都支持該選擇器，IE8 以及更早版本的瀏覽器不支持。
28、:not(selector) 【CSS3】
這個選擇器還是很強大的，用於匹配非指定元素/選擇器的每個元素，可以理解為取反的意思，即除了指定的元素以外所有元素。
下面的例子，指定頁面中除了 p 元素之外的所有元素設置為綠色背景，白色字體：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>:not(selector)</title> 6 <style> 7 p{ 8 color:red; 9 } 10 *:not(p){ 11 background:green; 12 color:white; 13 } 14 </style> 15 </head> 16 <body> 17 <h1>我是標題</h1> 18 <p>這是一個段落。</p> 19 <p>這是另一個段落。</p> 20 <div>這是 div 元素中的文本。</div> 21 <div> 22 <p>我是 div 中的段落。</p> 23 </div> 24 <ul> 25 <li>列表 1</li> 26 <li>列表 2</li> 27 </ul> 28 </body> 29 </html>
在 Chrome 中顯示如下，來感受一下他的強大吧：
頁面中除了 p 元素之外還有 body、html 元素，反正他都不會放過，那有人就說了，呢不是還有 title 元素么，這要是都改變了，那簡直就超神了。
:not(selector) 選擇器不止是這么用，其實他在某些時候還是相當有用的，比如要把除了 ID 為 "main" 之外的所有 div 元素都選中，那么使用他就再合適不過了。
1 div:not(#main){ 2 border:1px solid black; 3 }
注意：IE9+ 以及所有瀏覽器都支持該選擇器，IE8 以及更早版本的瀏覽器不支持。
29、::selection 【CSS3】
::selection 選擇器匹配元素中被用戶選擇或處於高亮狀態的部分。
::selection只可以應用於少數的CSS屬性：color、background、cursor 和 outline。
下面的代碼，當元素被用戶選中后會顯示為紅色的字體：
1 ::selection{ 2 color:red; 3 } 4 ::-moz-selection{ 5 color:red; 6 }
注意：IE9+ 以及所有瀏覽器都支持該選擇器，但是 Firefox 需要通過其私有屬性 ::-moz-selection 才能獲得支持 。
30、:empty 【CSS3】
這個選擇器用於匹配沒有子元素的每個元素，包括文本節點。
選擇所有沒有任何子級的元素，也就是說選擇頁面中所有指定的空元素。
下面的例子，指定所有空的 p 元素的背景色：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>:empty</title> 6 <style> 7 p:empty{ 8 width:100px; 9 height:20px; 10 background:#ff0000; 11 } 12 </style> 13 </head> 14 <body> 15 <p>第一個段落。</p> 16 <p></p> 17 <p>第三個段落。</p> 18 <p></p> 19 <p>第五個段落。</p> 20 </body> 21 </html>
注意：IE9+ 以及所以瀏覽器都支持該選擇器，IE8 以及更早版本的瀏覽器不支持。
在 Chrome 中顯示如下：
下面是其他 CSS 選擇器：
31、:root 【CSS3】
:root 匹配文檔的根元素，在 HTML 中，根元素始終是 html 元素。
1 :root{ 2 background:#E8E8E8; 3 }
上面的代碼，將 HTML 文檔的背景設置為淺灰色。
注意：IE9+ 以及所以瀏覽器都支持該選擇器，IE8 以及更早版本的瀏覽器不支持。
32、:first-line 【CSS1】
:first-line 用於選擇指定選擇器的首行。
該選擇器適用於塊級元素中。可以使用以下屬性：
font | color | background | line-height | clear |
word-spacing（字間距） | letter-spacing（字母間距）|
vertical-align | text-decoration（文本修飾） | text-transform（指定大小寫）。
1 p:first-line{ 2 color:red; 3 }
上面的代碼，指定頁面中所有段落的第一行顯示為紅色的字體。
33、:first-letter 【CSS1】
:first-letter 選擇器用於選取指定選擇器的首字母。
該選擇器僅適用於在塊級元素中，可以使用以下屬性：
font | color | background | margin | padding | border | line-height | float | clear |
vertical-align （垂直對齊，只有在 float 為 'none' 時）| text-decoration | text-transform 。
1 p:first-letter{ 2 font-size:32px; 3 color:#9B30FF; 4 }
上面的代碼，指定頁面中所有段落的第一個字母顯示為 32 像素的紫色字體。如果段落的首字符是中文，也會應用此樣式。
34、:lang(language) 【CSS2】
:lang 選擇器用於選擇帶有以指定值開始的 lang 屬性的元素。
該值必須是整個單詞，即可是單獨的，比如 lang="en"，也可使用連字符（-）比如 lang="en-us"。
1 p:lang(en){ 2 background:yellow; 3 } 4 5 <p lang="en"> CSS :lang selector. </p>
上面的代碼，選擇帶有以 "en" 開頭的 lang 屬性值的所有 p 元素。
下面是 CSS3 中新增加的用於表單的選擇器：
35、:enabled 【CSS3】
用於匹配每個啟用的元素，主要用於表單元素。
下面的例子，設置所有 type="text" 的已啟用的 input 元素設置背景色：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>:enabled</title> 6 <style> 7 input[type="text"]:enabled{ 8 background:yellow; 9 } 10 </style> 11 </head> 12 <body> 13 <form action=""> 14 姓名: <input type="text" value="小明" /><br/> 15 愛好: <input type="text" value="搗蛋" /><br/> 16 籍貫: <input type="text" disabled value="漢" /> 17 </form> 18 </body> 19 </html>
在 Chrome 中顯示如下：
注意：IE9+ 以及所有瀏覽器都支持該選擇器，IE8 以及更早版本的瀏覽器不支持。
36、:disabled 【CSS3】
用於匹配每個禁用的元素，主要用於表單元素。
使用上面的例子，設置所有 type="text" 的已禁用的 input 元素設置背景色：
1 input[type="text"]:disabled{ 2 background:#9C9C9C; 3 }
在 Chrome 中顯示如下：
37、:checked 【CSS3】
匹配每個選中的輸入元素，僅適用於單選按鈕或復選框。
下面的例子，為所有被選中的 input 元素設置背景色：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>:checked</title> 6 <style> 7 input:checked{ 8 background:red; 9 } 10 </style> 11 </head> 12 <body> 13 <form action=""> 14 <input type="radio" checked name="like" value="love" />喜歡<br> 15 <input type="radio" name="like" value="noLove" />不喜歡<br> 16 <input type="checkbox" checked value="散步" />散步<br> 17 <input type="checkbox" value="跑步" />跑步 18 </form> 19 </body> 20 </html>
注意：目前只有 IE9+ 和 Opera 瀏覽器支持該選擇器，Chrome 和 Firefox 不支持。而且在 IE9/IE10/IE11 中顯示有差異。
在 IE9 和 IE10 中顯示如下：
在 IE11 中取消了對復選框的支持，顯示如下：
38、:out-of-range 和 :in-range 【CSS3】
:out-of-range 匹配元素的值在指定區間之外時顯示的樣式。
:in-range 匹配元素的值在指定區間時顯示的樣式。
注意：這倆選擇器只作用於能指定區間值的元素，例如 input 元素中的 min 和 max 屬性。如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>:out-of-range 和 :in-range</title> 6 <style> 7 input:out-of-range{ 8 border:5px solid red; 9 } 10 input:in-range{ 11 border:5px solid green; 12 } 13 </style> 14 </head> 15 <body> 16 輸入一個小於 5 或者 大於 10 的值： 17 <input type="number" min="5" max="10" value="12" /> 18 <input type="number" min="5" max="10" value="8" /> 19 </body></html>
注意：除了 IE 之外所有瀏覽器都支持該選擇器。
在 Chrome 中顯示如下：
39、:read-write 【CSS3】
用於匹配可讀及可寫的元素，即未設置 readonly 屬性的元素。
目前，在大多瀏覽器中 :read-write 選擇器只適應於設置了 input 和 textarea 元素。如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>:read-write</title> 6 <style> 7 input:read-write{ 8 background-color:yellow; 9 } 10 input:-moz-read-write{ 11 background-color:yellow; 12 } 13 </style> 14 </head> 15 <body> 16 <p>普通的 input 元素：<input type="text" value="Hello"></p> 17 18 <p>只讀的 input 元素：<input type="text" readonly value="Hello"></p> 19 </body></html>
注意：除了 IE 之外所有瀏覽器都支持該選擇器，但是 Firefox 需要通過其私有屬性 :-moz-read-write 才能獲得支持 。
在 Chrome 中顯示如下：
40、:read-only 【CSS3】
用於匹配設置了 readonly 屬性的元素。
表單元素可以設置 readonly 屬性來定義元素只讀。
注意：目前，在大多數瀏覽器中 :read-only 選擇器適用於 input 和 textarea 元素，但是它也適用於設置了 readonly 屬性的元素。如下：
1 input:read-only{ 2 background-color:red; 3 } 4 input:-moz-read-only{ 5 background-color:red; 6 }
注意：除了 IE 之外所有瀏覽器都支持該選擇器，但是 Firefox 需要通過其私有屬性 :-moz-read-write 才能獲得支持 。
在 Chrome 中顯示如下：
41、:optional 【CSS3】
匹配可選的輸入元素，在表單元素是可選項時設置指定的樣式，即未設置 required 屬性的表單元素。
required 屬性是 HTML5 新增加的表單屬性，用於規定必需在提交表單之前填寫輸入字段。
表單元素中如果沒有特別設置 required 屬性即為可選的。
注意： :optional 選擇器只適用於表單元素：input、select 和 textarea。如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>:optional</title> 6 <style> 7 input:optional{ 8 background-color:yellow; 9 } 10 </style> 11 </head> 12 <body> 13 <p>可選的 input 元素：<input type="text" /></p> 14 <p>必填的 input 元素：<input type="text" required /></p> 15 </body> 16 </html>
注意：IE10+ 以及所有瀏覽器都支持該選擇器，IE9 以及更早版本的瀏覽器不支持。
在 Chrome 中顯示如下：
42、:required 【CSS3】
用於匹配設置了 required 屬性的元素，在表單元素是必填項時設置指定樣式。
表單元素可以使用 required 屬性來設置必填項。
注意： :required 選擇器只適用於表單元素：input、select 和 textarea。如下：
1 input:required{ 2 background-color:green; 3 }
注意：IE10+ 以及所有瀏覽器都支持該選擇器，IE9 以及更早版本的瀏覽器不支持。
在 IE 中顯示如下：
43、:valid 【CSS3】
匹配輸入值為合法的元素，在表單元素的值需要根據指定條件驗證時設置指定樣式。
注意： :valid 選擇器只作用於能指定區間值的元素，例如 input 元素中的 min 和 max 屬性，及正確的 email 字段，合法的數字字段等。如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>:valid</title> 6 <style> 7 input:valid{ 8 background-color:green; 9 } 10 </style> 11 </head> 12 <body> 13 <p>合法郵箱：</p> 14 <input type="email" value="demo@xx.com" /> 15 <p>非法郵箱：</p> 16 <input type="email" value="demo.com" /> 17 </body> 18 </html>
注意：IE10+ 以及所有瀏覽器都支持該選擇器，IE9 以及更早版本的瀏覽器不支持。
在 Chrome 中顯示如下：
44、:invalid 【CSS3】
匹配輸入值為非法的元素，在表單元素中的值是非法時設置指定樣式。
注意： :invalid 選擇器只作用於能指定區間值的元素，例如 input 元素中的 min 和 max 屬性，及正確的 email 字段，合法的數字字段等。如下：
1 input:invalid{ 2 border:2px solid red; 3 }
注意：IE10+ 以及所有瀏覽器都支持該選擇器，IE9 以及更早版本的瀏覽器不支持。
在 IE 中顯示如下：
目前，在 CSS 中，一共定義了 52 個選擇器。