《css3入門到精通系列》第一節：強大的css3選擇器

css3在常規基礎上增加了屬性選擇器、偽類選擇器和過濾選擇器等，減少你在開發中對html和id的依賴，和jquery的選擇器一樣強大；為目標獲取元素後施加樣式提供了極大靈活性。

根據頁面元素的不同可將css3選擇器大致分為5類：

1、基本選擇器，

2、層次選擇器

3、偽類選擇器（動態偽類、UI元素狀態偽類、結構為類、否定偽類選擇器）

4、偽元素

5、屬性選擇器

基本選擇器：

* ：通配選擇器，選擇文檔中所有的HTML元素節點，如“ *{} ” 或者“ E *{}”等；

E ：元素選擇器，選擇指定類型的HTML元素， 如“div{},ul{}”；

#id ：id選擇器，選擇指定id屬性值為"id"的任意類型元素，具有唯一性；如“#id”；

.class ：類選擇器，選擇指定class屬性值為“class”的任意類型的多個元素，可用於頁面 多個元素；如“.class”；

select1,selectN ：群組選擇器，將每一個選擇器匹配的元素集合並；如“div,p,ul{}”等，需要注意的是中間的英文逗號不能省掉；不然就成了後代選擇器；

層次選擇器：

E F ：後代選擇器，選擇包含在E元素裡面的F元素，不管F元素是E的子元素、孫元素或者更深的元素，都會被選中；

E>F ：子選擇器，選擇直接包含在E元素中的元素（子元素）；

E+F ：相鄰兄弟選擇器，選擇和E元素同級別下的緊跟在E元素後面的一個元素；

E~F ：通用選擇器，選擇和E元素同級別的後面所有元素；

動態偽類選擇器：

E:link ：鏈接偽類選擇器，選擇匹配的E元素，並且匹配元素被定義的超鏈接並未被訪問過，常用於鏈接錨點上；

E:visited ：鏈接偽類選擇器，選擇匹配的E元素，並且匹配元素被定義的超鏈接並已被訪問過，常用於鏈接錨點上；

E:active ：用戶行為偽類選擇器，選擇匹配的E元素，且匹配元素被激活，常用於錨點和按鈕上；

E:hover ：用戶行為偽類選擇器，選擇匹配的E元素，且用戶鼠標停留元素E上，IE6及以下只支持a:hover；

UI元素狀態偽類選擇器：

E:checked 選中狀態偽類選擇器，匹配選中的複選按鈕或單選按鈕表單元素；

E:enabled 啟用狀態偽類選擇器，匹配所有啟用的表單元素；

E:disabled 不可用狀態偽類選擇器，匹配所有禁用的表單元素；

結構偽類選擇器：

E:first-child 等同於E:nth-child(1)，選中父元素的第一個子元素E元素；

E:last-child 等同於E:nth-last-child(1)，選中父元素的最後一個子元素E；

E F:nth-child(n) 選擇父元素E的第n個子元素，n可以試整數，關鍵字（even,odd），n的起始值是1，不是0；

E F:nth-last-child(n) 選擇父元素E的倒數第n個子元素F，此選擇器與E F:nth-child(n)選擇器計算順序相反，但使用方法都是一樣；

E:nth-of-type(n) 選擇父元素內具有指定類型的第n個E元素；

E:nth-last-of-type(n) 選擇父元素內具有指定類型的倒數第n個E元素；

E:first-of-type 選擇父元素內具有指定類型的第一個E元素，與:nth-of-type(1)相同；

E:last-of-type 選擇父元素內具有指定類型的最後一個E元素，與:nth-last-of-type(1)等同；

E:only-child 選擇父元素只包含一個子元素的E元素；

E:only-of-type 選擇父元素中包含的唯一一個元素，也可能包含有其他很多的相同元素；

否定偽類選擇器：

:not()選擇器，該選擇器非常強大，常常用於過濾不要的元素節點；

偽元素：

::first-letter 常用於排版，用來設置首字母樣式，排版細節；

::first-line 常用於排版，用來設置第一行文本樣式細節；

::before ::after 插入額外內容的位置，生成的內容不會成為DOM的一部分，但同樣可以設置樣式；

屬性選擇器：

E[attr] 選擇匹配具有attr屬性的E元素，其中E可以省略，表示選擇定義了attr屬性的任意類型元素；

E[attr=val] 選擇匹配具有attr屬性的E元素，並attr的屬性值為val（val區分大小寫），同樣E元素省略時表示選擇定義了attr屬性值為val的所有類型元素；

E[attr|=val] 選擇匹配E元素，且E元素定義了屬性attr，attr屬性值是一個具有val或者以val開始的屬性值；

E[attr~=val] 選擇匹配E元素，且E元素定義了屬性attr，attr屬性值具有多個空格分隔的值，其中一個值等於val；

E[attr*=val] 選擇匹配元素E，且E元素定義了屬性attr，其屬性值任意位置包含了"val"。字符串val與屬性值中的任意位置相匹配；

E[attr^=val] 選擇匹配元素E，且E元素定義了屬性attr，其屬性值以val開頭的任何字符串；

E[attr$=val] 選擇匹配元素E，且E元素定義了屬性attr，其屬性值以val結尾的任何字符串，剛好與E[attr^val]相反；

如果文章對你有幫助，請隨意打賞，您的支持將鼓勵我繼續創作，喜歡的歡迎轉載，

點擊 關注，查看更多css3文章。