本博文介紹了CSS3中新增的選擇器，包括屬性選擇器、兩類結構偽類選擇器和偽元素選擇器，並對兩類結構偽類選擇器進行了比較。 ...
本博文介紹CSS3中新增的選擇器，包括屬性選擇器、結構偽類選擇器和偽元素選擇器。
1 屬性選擇器
屬性選擇器（[屬性]）可以根據元素的屬性和屬性值來對符合要求的元素進行選擇。
屬性選擇器的基礎語法如下表：
| 語法 | 說明 |
| 標簽[屬性] {} | 選擇有目標屬性的標簽 |
| 標簽[屬性="value"] {} | 選擇有目標屬性且屬性值為"value"的標簽 |
| 標簽[屬性^="x"] {} | 選擇有目標屬性且屬性值以"x"開頭的標簽 |
| 標簽[屬性$="x"] {} | 選擇有目標屬性且屬性值以"x"結尾的標簽 |
| 標簽[屬性*="x"] {} | 選擇有目標屬性且屬性值包含"x"的標簽 |
舉兩個實例：
① input[value] {} ：選擇具有value屬性的input標簽
② input[value="123"] {} ：選擇value屬性值為"123"的input標簽
註意事項：
（1）屬性選擇器（即[屬性]）的權重是0,0,1,0；
（2）標簽[屬性] 的權重是標簽權重+屬性選擇器權重。
2 結構偽類選擇器（上）
首先是第一類常用的結構偽類選擇器，這類選擇器常用於根據父級選擇器來選擇裡面的子元素。
基礎語法如下表：
| 語法 | 說明 |
| E:first-child | 選擇父元素中的第一個子元素，若該元素為E，則選中，否則選擇器不生效 |
| E:last-child | 選擇父元素中的最後一個子元素，若該元素為E，則選中，否則選擇器不生效 |
| E:nth-child(n) | 根據n來選擇父元素中的子元素，若選中的子元素為E，則選中，否則選擇器不生效 |
註意，這類選擇器的選擇步驟如下：
（1）先給所有子元素從1開始進行編號；
（2）根據選擇器來進行選擇。如：E:first-child就選擇第一個子元素，如果這個子元素是E的話，那麼就選中了；但如果第一個子元素不是E的話，那麼這類選擇器就不會生效。
總之，這類選擇器是“先編號，再選擇，選擇的元素為E，則選中”。
可能語法太模糊？上實例：
① ul li:first-child ：選擇 ul 下的第1個子元素，若該元素為li，則選中該元素，否則不生效；
② ul li:nth-child(6) ：選擇 ul 下的第6個子元素，若該元素為li，則選中該元素，否則不生效；
③ ul li:nth-child(2n) ：選擇 ul 下的所有第偶數個子元素（2n即為偶數），若其為 li 則選中。
接著，這裡還要對E:nth-child(n)這一基本語法按照 n 的分類進行詳細的說明：
| E:nth-child(n)中 n 的類型 | 說明（選中的子元素為E則生效） |
| 數字 | 選擇第n個子元素 |
| 關鍵字"even" | 選擇所有第偶數個子元素 |
| 關鍵字"odd" | 選擇所有第奇數個子元素 |
| 公式 | 根據公式進行選擇。註意：公式中的 n 從0開始計算，但子元素是從1開始計數的，因此第0個子元素是不存在的 |
當E:nth-child(n)中 n 的類型為“公式”時，提供以下實例供理解（n 從0開始計算）：
| 選擇器 | 說明（選中的子元素為E則生效） |
| E:nth-child(n) | 選擇從第0個開始的所有子元素 |
| E:nth-child(n+3) | 選擇從第3個開始的所有子元素 |
| E:nth-child(2n) | 選擇所有第偶數個子元素 |
| E:nth-child(2n+1) | 選擇所有第奇數個子元素 |
| E:nth-child(-n+3) | 選擇前3個子元素 |
實際上，在日常使用中，由於nth-child(n)會給所有子元素進行編號（不管是不是E），因此E:nth-child(n) 中 n 的值和 E 作為子元素的位置往往是對應的（這樣選擇器才會生效）。
3 結構偽類選擇器（下）
接著是第二類常用的結構偽類選擇器，這類選擇器也用於根據父級選擇器來選擇裡面的子元素，但和第一類有些差別。
基礎語法如下表：
| 語法 | 說明 |
| E:first-of-type | 選擇父元素中的第一個子元素E |
| E:last-of-type | 選擇父元素中的最後一個子元素E |
| E:nth-of-type(n) | 根據n來選擇父元素中的子元素E |
註意，這類選擇器的選擇步驟如下：
（1）先給所有子元素E從1開始進行編號；
（2）根據選擇器來進行選擇。如：E:first-of-type就選擇第一個子元素E。
直接上實例：
① div p:first-of-type ：選擇 div 下的第1個子元素p；
② div p:nth-of-type(2) ：選擇 div 下的第2個子元素p。
4 結構偽類選擇器的比較
| 結構偽類選擇器 | 說明 | |
| 不同點 | :first-child、:last-child、:nth-child(n) | 先給所有子元素編號，再選擇，選中若是E則選擇器有效，否則無效 |
| :first-of-type、:last-of-type、:nth-of-type(n) | 先給所有子元素E編號，再選擇，選中一定是E | |
| 共同點 | 結構偽類選擇器（如: first-child）的權重是0,0,1,0 | E:first-child的權重是 E 的權重 + 0,0,1,0 |
5 偽元素選擇器
偽元素選擇器可以利用css創建新標簽，簡化HTML結構。
偽元素選擇器的基礎語法如下表：
| 語法 | 說明 |
| E::before | 在元素E內部的前面插入內容 |
| E::after | 在元素E內部的後面插入內容 |
需要註意的地方如下：
（1）創建的標簽屬於行內元素；
（2）新創建的元素在文檔樹中找不到；
（3）before和after必須有content屬性；
（4）偽元素選擇器（::before 和 ::after）權重為0,0,0,1。
提供一個實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=, initial-scale=1.0"> <title>Document</title> <style> div::before{ content: "前面的"; } div::after{ content: "後面的"; } </style> </head> <body> <div> 選擇器 </div> </body> </html>
頁面效果如下：
可見，通過偽元素選擇器，div元素中的文字“選擇器”前後分別添加了文字“前面的”和“後面的”，這就是::before和::after的基礎用法。
