這 30 類 CSS 選擇器，你必須理解！
CSS 選擇器是一種模式，用於選擇須要添加樣式的元素。平時使用最多也是最簡單的就是 #id、.class 和標籤選擇器，在 CSS 中還有不少更增強大更加靈活的選擇方式，尤爲是在 CSS3 中，增長了不少新的選擇器，使得選擇元素更加便捷，因此必須理解這些選擇器，只有先理解了，多用幾回，天然而然就記住了。php
一、* 【CSS2】
通配符，選擇頁面全部元素。css
1 *{ 2 margin:0; 3 padding:0; 4 }
上面代碼的做用是把頁面上全部元素的內外邊距設置爲 0，這是最基本的清除默認 CSS 樣式的方法。在平時練習時使用這個沒問題，但在實際的項目中不建議使用，可使用世界級專家 Eric Meyer 的 CSS Reset 方案來重置瀏覽器默認樣式，也可使用 Normalize.css， CSS reset 和 Normalize 存着着根本理念上的差別，前者是將全部瀏覽器自帶的樣式重置掉，以確保各瀏覽器渲染的一致性，然後者則是儘可能保留瀏覽器的默認樣式，是一個可定製的 CSS 文件，使瀏覽器渲染全部元素更加一致，符合現代標準，Bootstrap 就使用了該方案。也能夠百度參考各大網站 CSS 代碼初始化樣式。html
* 也能夠用來選擇某元素的全部子元素。git
1 #box *{ 2 background-color:blue; 3 }
上面的代碼，會選則 ID 爲 box 下的全部元素。github
二、#ID 【CSS1】
ID 選擇器，選擇具備指定 id 屬性的元素。
瀏覽器
1 #content{ 2 width:960px; 3 margin:0 auto; 4 }
ID 就像身份證同樣，具備惟一性，因此 ID 選擇器是 CSS 中效率最高的選擇器。dom
三、.Class 【CSS1】
類選擇器，選擇具備指定類的全部元素。佈局
1 .main{ 2 color:red; 3 }
class 選擇器和 id 選擇器不一樣的是，一個頁面能夠有多個 class，而且 class 能夠在不一樣的標籤中使用，若是樣式相同的話。當你想對多個元素設置樣式時就可使用 class，而只是對某個特定的元素設置樣式那就使用 id。post
(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 樣式。
四、X 【CSS1】
標籤選擇器，選擇指定標籤名稱的全部元素。
1 a{ 2 text-decoration:none; 3 }
若是你想讓頁面上全部指定標籤的樣式改變，能夠直接使用標籤選擇器。
五、X, Y 【CSS1】
分組選擇器，在樣式表中具備相一樣式的元素，就可使用分組選擇器，把全部元素組合在一塊兒，元素之間用逗號分隔，這樣只須要定義一組 CSS 聲明。
1 h1, h2, h3, h4, h5, h6 ,p{ 2 color:red; 3 }
上面的代碼，選擇頁面上全部 h1 - h6 元素以及段落。
六、X Y 【CSS1】
後代選擇器，選擇指定元素內部的全部子元素，包括子元素、孫元素、曾孫元素等等。
1 li a{ 2 text-decoration:none; 3 }
若是你想選擇更加具體的元素，就可使用後代選擇器。好比：並不須要去掉頁面中全部連接的下劃線，而只是去掉全部列表連接的下劃線，這時就可使用後代選擇器。
七、X > Y 【CSS2】
子元素選擇器，選擇指定父元素的全部直接子元素，不包括孫元素、曾孫元素等等。
1 div > ul{ 2 border:1px solid black; 3 }
若是不但願選擇任意的後代元素，而只是選擇某個元素的子元素，那麼就使用子元素選擇器。
X Y 和 X > Y 的區別：前者做用於指定元素的全部後代元素，然後者只做用於指定元素的第一代後代，即直接子元素。
八、X + Y 【CSS2】
相鄰兄弟選擇器，選擇相同父元素下，緊跟着指定元素以後的兄弟元素。
1 ul + p{ 2 color:red; 3 }
上面的代碼，選擇全部相同父元素下緊跟着 ul 元素以後的第一個 p 元素。
九、X ~ Y 【CSS3】
普通兄弟選擇器，選擇相同父元素下，指定元素後的全部兄弟元素。
1 ul ~ p{ 2 color:red; 3 }
上面的代碼，選擇全部相同父元素下 ul 元素以後的每個 p 元素。
與相鄰兄弟選擇器不一樣，普通兄弟選擇器，兄弟元素沒必要緊跟在指定元素的後面，而且選擇指定元素後面全部的兄弟元素。
十、X[attr] 【CSS2】
屬性選擇器，選擇全部指定屬性的元素。
1 a[target]{ 2 background-color:red; 3 }
上面的代碼，選擇全部帶有 target 屬性的 a 元素。那些沒有此屬性的錨點將不會應用此樣式。
十一、X[attr=value] 【CSS2】
屬性和值選擇器，選擇全部指定屬性和值的元素。
1 a[target=_blank]{ 2 background-color:red; 3 }
上面的代碼，選擇全部屬性爲 target="_blank" 的 a 元素。只應用於在新標籤頁打開的連接，其餘錨點將不受影響。
十二、X[attr~=value] 【CSS2】
這個選擇器用於選擇屬性值包含一個指定單詞的元素。~ 符號能夠選擇指定屬性值是空格分隔多值的元素。
1 img[title~=flower]{ 2 border:2px solid blue; 3 }
上面的代碼，選擇全部帶有 title 屬性值包含 flower 單詞的 img 元素。
1三、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 不能被選中。然後者這三個均可以選中，只要是值的子串就能夠了。
其餘選擇器和上面的原理相同，即 |= 和 ~= 特性相同，^=、$= 和 *= 特性相同。
1四、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 也會匹配。
1五、X[attr^=value] 【CSS3】
這個選擇器用於匹配元素屬性值帶有指定的值開始的元素。
1 a[href^="https"]{ 2 background-color:red; 3 }
上面的代碼，選擇全部 href 屬性的值以 "https" 開頭的 a 元素。
1六、X[attr$=value] 【CSS3】
這個選擇器匹配元素屬性值帶有指定的值結尾的元素。
1 img[src$=".png"]{ 2 border:2px solid red; 3 }
上面的代碼，選擇全部 src 屬性的值以 ".png" 結尾的 img 元素。
1七、:link 和 :visited 【CSS1】
僞類選擇器。
:link 選擇全部未訪問的連接。
:visited 選擇全部訪問過的連接。
1 a:link{ 2 color:red; 3 } 4 a:visited{ 5 color:purple; 6 }
上面的代碼，全部未訪問的連接顯示爲紅色，全部訪問過的連接顯示爲紫色。
1八、:active 【CSS1】
僞類選擇器。
用於選擇活動的連接，當鼠標點擊一個連接時，他就會成爲活動連接，該選擇器主要用於向活動連接添加特殊樣式。
1 a:active{ 2 background-color:yellow; 3 }
上面的代碼，當點擊頁面每一個連接時，顯示黃色背景色。
1九、: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 像素的底邊框。
2一、: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 類名就行了。
2二、:focus 【CSS2】
這個選擇器用於選擇具備焦點的元素，該選擇器接受鍵盤事件或其餘用戶輸入的元素。
1 input:focus{ 2 background-color:yellow; 3 }
上面的代碼，當輸入域得到焦點時顯示爲黃色背景。
2三、: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 元素。
1、他們有什麼區別呢？
: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 中定義的，他們的區別與上面總結的原理相同。
2四、: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 以及更早版本不支持。
2五、: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 以及更早版本不支持。
2六、: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 以及更早版本不支持。
1、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 中顯示以下：
2、這 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 中顯示以下：
2七、: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 以及更早版本的瀏覽器不支持。
2八、: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 以及更早版本的瀏覽器不支持。
2九、::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 選擇器：
3一、:root 【CSS3】
:root 匹配文檔的根元素，在 HTML 中，根元素始終是 html 元素。
1 :root{ 2 background:#E8E8E8; 3 }
上面的代碼，將 HTML 文檔的背景設置爲淺灰色。
注意：IE9+ 以及因此瀏覽器都支持該選擇器，IE8 以及更早版本的瀏覽器不支持。
3二、: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 }
上面的代碼，指定頁面中全部段落的第一行顯示爲紅色的字體。
3三、: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 像素的紫色字體。若是段落的首字符是中文，也會應用此樣式。
3四、: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 中新增長的用於表單的選擇器：
3五、: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 以及更早版本的瀏覽器不支持。
3六、:disabled 【CSS3】
用於匹配每一個禁用的元素，主要用於表單元素。
使用上面的例子，設置全部 type="text" 的已禁用的 input 元素設置背景色：
1 input[type="text"]:disabled{ 2 background:#9C9C9C; 3 }
在 Chrome 中顯示以下：
3七、: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 中取消了對複選框的支持，顯示以下：
3八、: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 中顯示以下：
3九、: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 中顯示以下：
4一、: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 中顯示以下：
4二、:required 【CSS3】
用於匹配設置了 required 屬性的元素，在表單元素是必填項時設置指定樣式。
表單元素可使用 required 屬性來設置必填項。
注意： :required 選擇器只適用於表單元素：input、select 和 textarea。以下：
1 input:required{ 2 background-color:green; 3 }
注意：IE10+ 以及全部瀏覽器都支持該選擇器，IE9 以及更早版本的瀏覽器不支持。
在 IE 中顯示以下：
4三、: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 中顯示以下：
4四、:invalid 【CSS3】
匹配輸入值爲非法的元素，在表單元素中的值是非法時設置指定樣式。
注意： :invalid 選擇器只做用於能指定區間值的元素，例如 input 元素中的 min 和 max 屬性，及正確的 email 字段，合法的數字字段等。以下：
1 input:invalid{ 2 border:2px solid red; 3 }
注意：IE10+ 以及全部瀏覽器都支持該選擇器，IE9 以及更早版本的瀏覽器不支持。
在 IE 中顯示以下：
目前，在 CSS 中，一共定義了 52 個選擇器。
- 1. 這 30 類 CSS 選擇器，你必須理解！
- 2. 這 30 類 CSS 選擇器，你必須記在腦殼裏！
- 3. 這30個CSS選擇器，你必須熟記（上）
- 4. 這30個CSS選擇器，你必須熟記（下）
- 5. 這30個CSS選擇器，你必須熟記（中）
- 6. 30個你必須熟記的CSS選擇器
- 7. 30個你必須記住的CSS選擇符
- 8. 前端必須掌握的30個CSS選擇器
- 9. 【CSS】【選擇器】CSS選擇器種類
- 10. 前段開發必記住 30 類 CSS 選擇器
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • XQuery 選擇 和 過濾 - XQuery 教程
- • 再有人問你分佈式事務，把這篇扔給他
- • Kotlin學習（二）基本類型
-
每一个你不满意的现在，都有一个你没有努力的曾经。