前面的話
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;}
屬性選擇器
屬性選擇器根據元素的屬性及屬性值來選擇元素(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瀏覽器需要添加前綴
文章列表
留言列表
