目錄

一、屬性選擇器

二、結構偽類選擇器

三、偽元素選擇器

四、UI狀態偽類選擇器

五、反選偽類選擇器

六、target選擇器?

七、父親選擇器、后代選擇器

八、相鄰兄弟選擇器、兄弟們選擇器

---

一、屬性選擇器

（除IE6外的大部分瀏覽器支持）

E：某個標簽元素如div，arr：該元素的某個屬性:

選擇器	解釋	例子
E[arr^='value']	選中屬性以‘value’開頭的E元素
E[arr$='value']	選中屬性以value結尾的E元素
E[arr*='value']	選中屬性包含value的E元素

補充：

1、E:root——匹配文檔的根元素，對于HTML文檔，就是HTML元素

2、E:empty——匹配一個不包含任何子元素的元素，注意，文本節點也被看作子元素

二、結構偽類選擇器

（FireFox 1.5/2.0/3.0 支持E:root，FireFox 3.0支持E:last-child、E:empty，IE6/7/8不支持）

選擇器	解釋	示例
E:first-child	父元素下第一個子元素
E:last-child	父元素下最后一個子元素	略
E:nth-child(n)	父元素下第n個子元素	略
E:nth-child(even)	父元素下第偶數個子元素
E:nth-child(odd)	父元素下第奇數個子元素	略
E:nth-child(公式)	父元素下第公式所指的每一個子元素	略
E:first-of-type、last-of-type	父元素下第一個E元素、父元素下最后一個E元素
E:nth-of-type(n)、nth-of-type(公式)	父元素下第n個E元素、父元素下第公式所指的每一個E元素
E:nth-of-type(even)	父元素下第偶數個E元素
E:nth-of-type(odd)	父元素下第奇數個E元素	略
E:nth-child和E:nth-of-type區別	1、E:nth-child(n)的對象是E元素下的所有子元素；而nth-of-type(n)的對象指父元素下所有E元素； 2、E:nth-child(n)不一定渲染，當第n個元素不是E時，樣式無法渲染；nth-of-type(n)一定渲染

三、偽元素選擇器

顧名思義，假的元素，主要是說E::before可以在E元素前面加一個偽元素,E::after可以在E元素后面加一個偽元素。

選擇器	解釋	示例
E::before	用來實現在元素內容之前插入內容	?
E::after	用來實現在元素內容后面插入內容	略
E::first-letter	為E元素文本中的首個字母或文字添加樣式
E::first-line	用來實現向文本的首行添加樣式	略

四、UI狀態偽類選擇器

選擇器	解釋	示例
E:enabled	匹配表單中激活的元素
E:disabled	匹配表單中禁用的元素
E:checked	匹配表單中被選中的radio（單選框）或checkbox（復選框）元素
E::selection	匹配用戶當前選中的元素(鼠標在瀏覽器上選中的文字內容，本來是淡藍色，通過E::selection，賦予了新的選中樣式)

五、反選偽類選擇器

選擇器	解釋	示例
E:not(s)	匹配E選擇器中，不是s的所有E選擇器

六、target選擇器?

選擇器	解釋	示例
E:target	匹配文檔中特定"id"點擊后的效果

七、父親選擇器、后代選擇器

選擇器	解釋	示例
父親選擇器div>p{...}	E元素的子元素
后代選擇器div p{...}	E元素的子元素以及孫子元素等所有的后代元素

八、相鄰兄弟選擇器、兄弟們選擇器

選擇器	解釋	示例
相鄰兄弟選擇器：E+F	匹配最鄰近的兄弟元素
兄弟們選擇器：E ~ F	匹配任何在E元素之后的同級F元素	?

十、最后

歡迎評論區糾錯或者補充哦。