在CSS3中是提倡使用選擇器來將樣式與元素直接綁定在一起的。 網頁開發過程中，我們需要定義很多class來應用到不同的元素上，由於class本身是沒有語義而且是可以復用的，所以過度使用class會使得整個樣式表結構非常混亂。為了減少class的使用頻度，需要儘可能的使用選擇器來指定元素。而且使用選擇 ...
在CSS3中是提倡使用選擇器來將樣式與元素直接綁定在一起的。
網頁開發過程中，我們需要定義很多class來應用到不同的元素上，由於class本身是沒有語義而且是可以復用的，所以過度使用class會使得整個樣式表結構非常混亂。為了減少class的使用頻度，需要儘可能的使用選擇器來指定元素。而且使用選擇器還可以定義很多規則，這樣也可以減少重覆定義class的代碼量。
在CSS3中，主要有以下幾種選擇器：屬性選擇器、結構性選擇器、UI狀態選擇器、通用兄弟元素選擇器。下麵分別介紹一下：
（一）屬性選擇器
顧名思義，屬性選擇器就是根據各種屬性來選定目標的。通常我們還會結合通配符來使用屬性選擇器。表達式為：[attr=val] {樣式內容}，常用通配符有以下3個：
1) [ attr*=val ] 返回'attr'屬性中包含val字元串的所有元素。如[id*=section]可選中#section1、#subsection，不能選中sec-tion。
2) [ attr^=val ] 返回'attr'屬性以val字元串開頭的所有元素。如[id*=section]可選中#section1、不能選中#subsection。
3) [ attr$=val ] 返回'attr'屬性以val字元串結尾的所有元素。如[id*=section]可選中#subsection、不能選中#section1。
屬性選擇器規則簡單，但是使用非常靈活多變，恰當使用可以對代碼起到很好的精簡。
（二）結構性選擇器
在CSS中，除了我們自定義的類選擇器外，還有CSS已經定義好的選擇器，如a元素上的a:link, a:visited, a:hover, a:active這些狀態偽類。可以結合類來使用，表達式：選擇器 類名：偽類/偽元素{樣式內容}。在CSS中結構性選擇器如下（引自http://www.w3school.com.cn/）：
| 選擇器 | 例子 | 例子描述 | CSS |
|---|---|---|---|
| first-line | p:first-line | 選擇每個 <p> 元素的首行。 | 1 |
| :first-letter | p:first-letter | 選擇每個 <p> 元素的首字母。 | 1 |
| :before | p:before | 在每個 <p> 元素的內容之前插入內容。 | 2 |
| :after | p:after | 在每個 <p> 元素的內容之後插入內容。 | 2 |
| :root | :root | 選擇文檔的根元素。 | 3 |
| :empty | p:empty | 選擇沒有子元素的每個 <p> 元素（包括文本節點）。 | 3 |
| :target | #news:target | 選擇當前活動的 #news 元素。 | 3 |
| :not(selector) | :not(p) | 選擇非 <p> 元素的每個元素。 | 3 |
| :first-child | p:first-child | 選擇屬於父元素的第一個子元素的每個 <p> 元素。 | 2 |
| :last-child | p:last-child | 選擇屬於其父元素最後一個子元素每個 <p> 元素。 | 3 |
| :only-child | p:only-child | 選擇屬於其父元素的唯一子元素的每個 <p> 元素。 | 3 |
| :nth-child(n) | p:nth-child(2) | 選擇屬於其父元素的第二個子元素的每個 <p> 元素。 | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | 同上，從最後一個子元素開始計數。 | 3 |
| :first-of-type | p:first-of-type | 選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素。 | 3 |
| :last-of-type | p:last-of-type | 選擇屬於其父元素的最後 <p> 元素的每個 <p> 元素。 | 3 |
| :only-of-type | p:only-of-type | 選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素。 | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | 選擇屬於其父元素第二個 <p> 元素的每個 <p> 元素。 | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 同上，但是從最後一個子元素開始計數。 | 3 |
這裡選一些常用的有內容的選擇器來說一下。
1)befor和after選擇器：通常會配合content使用，在被選元素內（添加到該元素內的innerHTML）的前後添加content。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>各種選擇器</title> 6 <style type="text/css"> 7 h2:after { 8 content: "（在後面添加文字，可以指定樣式）"; 9 color: blue; 10 } 11 </style> 12 </head> 13 <body> 14 <p>顯示效果：</p> 15 <div id="main"> 16 <h2>第一個標題</h2> 17 <p>第1個段落</p> 18 <h2>第二個標題</h2> 19 <p>第2個段落</p> 20 <h2>第三個標題</h2> 21 <p>第3個段落</p> 22 </div> 23 </body> 24 </html>
如果有某些元素不加的話，可以為他們設置一個類，設置其content為none即可。h2.noadd:after { content: none; }
此外，content還可以是圖片url(pathname.png)，不用img標簽而用content的好處可以不用編寫大量img標簽，常用於購物單上的新貨品，文章列表中的新文章等。
看到content的作用，當然大家都能想到他的一個重要用途就是為項目增加序號了，添加序號需要兩步：在content中指定couter，然後在目標元素的樣式表中定義couter屬性，比如couter-increment和counter-reset
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>各種選擇器</title> 6 <style type="text/css"> 7 h2:before { content: '第'counter(hcouter)'項'; color: red;} 8 h2 { counter-increment: hcouter; counter-reset: pcouter;} 9 p:before { content: '第'counter(pcouter)'段'; color: blue;} 10 p { counter-increment: pcouter; } 11 </style> 12 </head> 13 <body> 14 <span>顯示效果：</span> 15 <div id="main"> 16 <h2>第一個標題</h2> 17 <p>段落</p> 18 <p>段落</p> 19 <p>段落</p> 20 <h2>第二個標題</h2> 21 <p>段落</p> 22 <p>段落</p> 23 </div> 24 </body> 25 </html>
在嵌套中要註意的是需要在子項目前設置counter-reset: 來為下級項目號重置couter，否則上文中的第2標題下的段落就從4開始了。
2)target：使用target選擇器來對頁面中的target元素(ID被設置為頁面中的超鏈接來使用)指定樣式，樣式只有在用戶點擊了該鏈接，並且跳轉到target元素後起作用。
3):nth-child(n),:nth-of-type(n)：child與type的區別在於，child在統計子元素時是不分類型的，而type是區分類型的。舉個慄子：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>各種選擇器</title> 6 <style type="text/css"> 7 h2:nth-child(2) { background-color: blue; } 8 h2:nth-child(3) { background-color: grey; } 9 </style> 10 </head> 11 <body> 12 <h2>第一個標題</h2> 13 <p>第1個段落</p> 14 <h2>第二個標題</h2> 15 <p>第2個段落</p> 16 <h2>第三個標題</h2> 17 <p>第3個段落</p> 18 </body> 19 </html>View Code
頁面顯示：
我們本意是要設置第2第3個<h2>標簽的背景色，而瀏覽器給出的結果卻把第二個h2改成了灰底，第3個h2完全沒作用。這是因為在統計h2父元素的child時是不分類型的，所以<p>也被算了進去。這樣的話，h2:child(2)就成了“<p>第1個段落</p>”，h2:child(3)就是“<h2>第二個標題</h2>”了。
為瞭解決這個問題，我們可以使用:nth-of-type(n)來指定元素類型就可以得到想要的結果了。
1 <style type="text/css"> 2 h2:nth-of-type(2) { background-color: blue; } 3 h2:nth-of-type(3) { background-color: grey; } 4 </style>
另外(n)還可以參數化以實現迴圈模式，輸入xn+y指定x個數為一個迴圈，y取1~x代表迴圈里的x種類型，如3n+1，3n+2，3n+3（可簡寫成3n）。當x=2的時候就是奇偶項了，可以用單詞odd（奇數）even（偶數）表示，這個方法常用在列表或者表格背景色交替切換的場景。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>各種選擇器</title> 6 <style type="text/css"> 7 ul.lis { 8 width: 140px; 9 padding: 10px; 10 margin: 0; 11 } 12 ul.lis li { 13 list-style-type: none; 14 white-space: nowrap; 15 overflow: hidden; 16 text-overflow: ellipsis; 17 } 18 ul.lis li:nth-child(odd) { background-color: aquamarine; } 19 ul.lis li:nth-child(even) { background-color: burlywood; } 20 </style> 21 </head> 22 <body> 23 <span>顯示效果：</span> 24 <div id="main"> 25 <ul class="lis"> 26 交替顯示列表項目 27 <li>列表項目1，奇數項目背景色</li> 28 <li>列表項目2，偶數項目</li> 29 <li>列表項目3</li> 30 <li>列表項目4</li> 31 </ul> 32 </div> 33 </body> 34 </html>
（三）UI狀態偽類選擇器
CSS3還提供了11種UI元素狀態偽類選擇器，但各瀏覽器對UI元素狀態選擇器支持不同，如下圖：
這些選擇器很大一部分是專為PC端設置的，主要是用在一些動態表單中。從屏幕尺寸和交互體驗上考慮，移動端頁面中一次呈現的表單元素應該儘可能少，因為輸入表單在移動端的體驗是比較差的（其實PC端也差！）。所以，在不多的內容裡面，不需要太多形式上的東西！
（四）通用兄弟元素選擇器
使用格式：子元素1 - 子元素2 {樣式內容}
返回的是子元素1後面的所有與元素1同級的子元素2。這裡的選擇規則有兩個：元素1後面、同級的子元素2。
總結：選擇器規則不多，用法也相當簡單，難點在於如何選擇適當的選擇器組合。上述選擇器的優勢是精准定位，但同時擴充性就變差了，後續假如要更改結構增減元素的話，使用上述選擇器就有可能出現問題了。
