淺談css選擇器

1、css選擇器分類

2、選擇器語法

一、基本選擇器語法

選擇器	類型	功能描述
*	通配選擇器	選擇文檔中的全部HTML元素,如：*{margin:0}
E	元素選擇器	選擇指定類型的HTML元素，如：p{font-size:16px}
id	ID選擇器	選擇指定ID屬性值爲’id’的任意類型元素,如: #myDiv:{width:200px}
.class	類選擇器	選擇指定class屬性值爲’class’的任意類型的任意多個元素,如：.red{color:red}
selector1,selectorN	羣組選擇器	將每個選擇器匹配的元素集合,如:p，div{color:red}

二、層次選擇器

選擇器	類型	功能描述
E F	後代選擇器	該選擇器定位元素E的後代中全部元素F，如: ul li{color:red}
E>F	子選擇器	該選擇器定位元素E的直接子元素中的全部元素F
E+F	相鄰兄弟選擇器	該選擇器定位與元素E有相同父元素且緊鄰元素E的元素F
E~F	通常兄弟選擇器	該選擇器定位與元素E有相同父元素且位於E以後的全部元素F

三、動態僞類選擇器

選擇器	類型	功能描述
E:link	連接僞類選擇器	該選擇器匹配元素E被定義了超連接並未被訪問過。經常使用於連接描點上
E:visited	連接僞類選擇器	該選擇器匹配元素E被定義了超連接並已被訪問過。經常使用於連接描點上
E:active	用戶行爲選擇器	該選擇器匹配元素E被被激活。經常使用於連接描點和按鈕上
E:hover	用戶行爲選擇器	該選擇器匹配元素E且用戶鼠標停留在元素E上。IE6及如下瀏覽器僅支持a:hover
E:focus	用戶行爲選擇器	該選擇器匹配元素E且並且匹配元素獲取焦點

注：a:hover 必須位於 a:link 和 a:visited 以後，a:active 必須位於 a:hover 以後 


四、目標僞類選擇器

選擇器	功能描述
E:target	該選擇器匹配相關URL指向的E元素

五、UI元素狀態僞類選擇器

選擇器	類型	功能描述
E:checked	選中狀態僞類選擇器	匹配選中的複選按鈕或者單選按鈕表單元素
E:enabled	啓用狀態僞類選擇器	匹配全部啓用的表單元素
E:disabled	不可用狀態僞類選擇器	匹配全部禁用的表單元素

六、結構僞類選擇器

選擇器	功能描述
E:fisrt-child	父元素的第一個子元素E，與:nth-child(1)相同；
E:last-child	父元素的倒數第一個子元素E
E:root	根元素，始終指html元素；
E F:nth-child(n)	該選擇器定位元素E的第n個子元素的元素F：
E F:nth-last-child(n)	該選擇器定位元素E的倒數第n個子元素的元素F；
E:nth-of-type(n)	該選擇器定位元素E的第n個指定類型子元素；
E:nth-last-of-type(n)	該選擇器定位元素E的導數第n個指定類型子元素：
E:first-of-type	與:nth-of-type(1)相同；
E:last-of-tye	與:nth-last-of-type(1)相同；
E:only-child	父元素中惟一的子元素E
E:only-of-type	父元素中惟一具備該類型的元素E；
E:empty	沒有子元素的元素，沒有子元素包括文本節點；

注：:nth-child(odd) 選擇的是奇數項，而使用:nth-last-child(odd) 選擇的倒是偶數項 


七、否認僞類選擇器

選擇器	功能描述
E:not(F)	匹配全部除元素F外的E元素

八、屬性選擇器

選擇器	功能描述
E[attr]	該選擇器定位具備屬性attr的任何元素E;
E[attr=value]	該選擇器定位具備屬性attr且屬性值爲value的任何元素E;
E[attr	=value]
E[attr^=value]	該選擇器定位具備屬性attr且屬性值以value開頭的任何元素E;
E[attr*=value]	該選擇器與E[attr~=value]類似，但更進一步，定位具備屬性attr且屬性值任意位置包含val的元素E，value能夠是一個完整的單詞，也能夠是一個單詞中的一部分;
E[attr$=value]	該選擇器與E[attr^=value]正好相反，定位具備屬性attr且屬性值以value結尾的任何元素E;
E[attr~=value]	該選擇器定位具備屬性attr且屬性值爲完整單詞 value 的任何元素E;

九、僞元素

選擇器	功能描述
:first-line	匹配文本首行;
:first-letter	匹配文本首字母;
:before 與:after	使用 contnet 屬性生成額外的內容並插入在標記中;
:selection	匹配突出顯示的文本;