CSS的一個核心特性是能向文檔中的一組元素類型應用某些規則，本文將詳細介紹CSS選擇器
通配選擇器
星號*代表通配選擇器，可以與任何元素匹配
*{color: red;}
元素選擇器
文檔的元素是最基本的選擇器
html{color: black;}
p{color: gray;}
h2{color: silver;}
類選擇器
類選擇器用於選擇一類元素
.div{color: red;}
1、多類選擇器
.div1.div2{color: red;}
2、結合元素的類選擇器
p.div{color: red;}
ID選擇器
ID選擇器用於選擇一個元素
#test{color: red;}
注意：在實際中，瀏覽器並不會檢查ID的唯一性，設置多個ID，可以爲這些具有相同ID的元素應用相同樣式，但在編寫DOM腳本時只能識別該id的第一個元素。
1、結合元素的ID選擇器
div#test{color: red;}
專門建立的學習Q-q-u-n： 731771211，分享學習方法和需要注意的小細節，不停更新最新的教程和學習技巧
（從零基礎開始到前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）
屬性選擇器
屬性選擇器根據元素的屬性及屬性值來選擇元素(IE6-不支持)
1、簡單屬性選擇器
h1[class]{color: red;}
img[alt]{color: red;}
a[href][title]{color: red;}
#div[class]{color: red;}
.box[id]{color: red;}
[class]{color: red;}
2、具體屬性選擇器
a[href="http://www.baidu.com"][title="baidu"] {color: red;}
class裏面的值以及順序必須完全相同，並且不可多空格或者少空格
[class="test box"]{color: red;}
ID選擇器和指定id屬性的屬性選擇器並不是一回事，主要在於優先級不同
[id="tox"]{color: red;}
3、部分屬性選擇器
[class ~="b"] 選擇class屬性值在用空格分隔的詞列表中包含詞語"b"的所有元素
例如：class="ab"不滿足[class ~=“b”]，而class="a b"或class="b"滿足
[class |="b"] 選擇class屬性值等於b或以b-開頭的所有元素
例如：class="ab"或class="ab-"不滿足[class |=“a”]，而class="a"或class="a-"滿足
[class ^="b"] 選擇class屬性值以"b"開頭的所有元素
[class $="b"] 選擇class屬性值以"b"結尾的所有元素
[class *="b"] 選擇class屬性值包含"b"的所有元素
上面三個屬於正則匹配，是CSS3新增的屬性選擇器
分組選擇器
將要分組的選擇器放在規則左邊，並用逗號隔開
h1,p{color: red;}
後代選擇器
ul li{color: red;}
div p, ul li{color: red;}
1、子元素選擇器(IE6-不支持)
ul > li{color: red;}
兄弟元素選擇器
1、相鄰兄弟選擇器(IE6-不支持)
div + p{color: red;}
注意：兩個元素之間的文本內容不會影響相鄰兄弟結合符起作用
2、通用兄弟選擇器(IE7-不支持)
選擇匹配的F元素，且位於匹配的E元素後的所有匹配的同級F元素
div ~ p {color:red;}
僞類選擇器
僞類順序：link-visited-focus-hover-active
1、靜態僞類(只應用於超鏈接)
注意：visited僞類只能設置字體顏色、邊框顏色、outline顏色的樣式
:link 未訪問
:visited 已訪問
a:link{color: red;}
a:visited{color: green;}
2、動態僞類(可應用於任何元素)
:focus 擁有焦點(IE7-不支持)
:hover 鼠標停留(IE6-不支持給<a>以外的其他元素設置僞類)
:active 正被點擊(IE7-不支持給<a>以外的其他元素設置僞類)
3、目標僞類:target(IE8-不支持)
匹配錨點對應的目標元素
:target{color: red;}
#test :target{color: red;}//id爲test的目標元素
4、UI元素僞類(IE8-不支持)
:enabled 可用狀態
:disabled 不可用狀態
:checked 選中狀態
input:enabled{color: red}
注意：input和:和enabled之間都不可以有空格
5、結構僞類(IE8-不支持)
E:first-child(IE6-不支持) 父元素的第一個子元素,且該子元素是E，與E:nth-child(1)等同
E:last-child(IE6-不支持) 父元素的最後一個子元素，且該子元素是E，與E:nth-last-child(1)等同
:root 選擇文檔的根元素，即<html>元素
E F:nth-child(n) 選擇父元素的第n個子元素，父元素是E，子元素是F
E F:nth-last-child(n) 選擇父元素的倒數第n個子元素，父元素是E，子元素是F
E F:nth-of-type(n) 選擇父元素的具有指定類型的第n個子元素，父元素是E，子元素是F
E F:nth-last-of-type(n) 選擇父元素的具有指定類型的倒數第n個子元素，父元素是E，子元素是F
E:first-of-type 選擇父元素中具有指定類型的第1個子元素，與E:nth-of-type(1)相同
E:last-of-type 選擇父元素中具有指定類型的最後1個子元素，與E:nth-last-of-type(1)相同
E:only-child 選擇父元素中只包含一個子元素，子元素是E
E:only-of-type 選擇父元素中只包含一個同類型的子元素，子元素是E
E:empty 選擇沒有子元素的元素，而且該元素也不包含任何文本節點
注意：n可以是整數(從1開始)，也可以是公式，也可以是關鍵字(even、odd)
p:first-child 代表的並不是`<p>`的第一個子元素，而是`<p>`元素是某元素的第一個子元素
p > i:first-child 匹配所有`<p>`元素中的第一個`<i>`元素
p:first-child i 匹配所有作爲第一個子元素的<p>元素中的所有`<i>`元素
6、:lang 相當於|=屬性選擇器(IE7-不支持)
p:lang(en) 匹配語言爲"en"的<p>
7、僞類的結合
a:visited:hover:first-child{color: black;}
注意：順序無關
僞元素選擇器
IE8-瀏覽器僅支持僞元素選擇器的單冒號表示法
1、:first-letter 設置首字母樣式
所有前導標點符號應與第一個字母一同應用該樣式；只能與塊級元素關聯；只有當選擇器部分和左大括號之間有空格時，IE6-瀏覽器才支持。因爲first-letter中存在連接符的原因
p:first-letter {color: red;}
2、:first-line 設置首行樣式
只能與塊級元素關聯；只有當選擇器部分和左大括號之間有空格時，IE6-瀏覽器才支持。因爲first-line中存在連接符的原因
p:first-line{color: red;}
3、:before 在元素內容前面插入內容(IE7-不支持)
默認這個僞元素是行內元素，繼承元素可繼承的屬性；所有元素都必須放在出現該僞元素的選擇器的最後面。若寫成 p:before em 就是不合法的
p:before{content:"text"}
4、:after 在元素內容後面插入內容(IE7-不支持)
默認這個僞元素是行內元素，繼承元素可繼承的屬性
p:after{content:"text"}
5、::selection 匹配被用戶選擇的部分
目前selection只支持color和background兩個屬性，且只支持雙冒號寫法(IE8-瀏覽器不支持)
::-moz-selection firefox瀏覽器需要添加前綴
專門建立的學習Q-q-u-n： 731771211，分享學習方法和需要注意的小細節，不停更新最新的教程和學習技巧
（從零基礎開始到前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）
根元素選擇器
單獨把它拿出來講，是因爲其特殊性。根元素選擇器:root用來選擇HTML元素，但由於其實質是僞類選擇器，所以其優先級更高。在HTML上設置的樣式，如果在:root上也設置了同樣的樣式，則會被覆蓋
下面是一個例子，常說的rem單位是以根元素的font-size爲標準的
html{font-size:20px;}
:root{font-size:30px;}
上面的代碼中，最終1rem=30px