CSS選擇器介紹

1、元素選擇器

E{...}

2、屬性選擇器

E[attr]{...}：指定該CSS對具備attr的元素起做用；

E[attr=value]{...}：：指定該CSS對具備attr的值爲value的元素起做用；

E[attr~=value]{...}：指定該CSS對具備attr屬性，且屬性值以逗號分隔，屬性值中有value的元素起做用；

E[attr|=value]{...}：指定該CSS對具備attr屬性，且屬性值以連字符分割，第一個屬性值爲value的元素起做用；

E[attr^="value"]{...}：指定該CSS對具備attr屬性，且屬性值是以value開頭的字符串的元素起做用；

E[attr$="value"]{...}：指定該CSS對具備attr屬性，且屬性值是以value結尾的字符串的元素起做用；

E[attr*="value"]{...}：指定該CSS對具備attr屬性，且屬性值包含value的字符串的元素起做用。

同時具備以上選擇器是，優先級由上到下依次增高。

3、ID選擇器

#ID{...}

4、CLASS選擇器

.CLASS{...}

5、包含選擇器

Selector1 Selector2{...}：指定該CSS對在選擇器Selector1中知足Selector2的元素起做用。

6、自選擇器

Selector1>Selector2{...}：指定該CSS對選擇器Selector1的直接子元素（或子元素的子元素等）知足Selector2的元素起做用。

7、兄弟選擇器

Selector1~Selector2{...}:指定該CSS對選擇器Selector1的兄弟元素中知足Selector2的元素起做用。

8、選擇器組合

Selector1,Selector2,Selector3,...{...}:指定該CSS對一系列知足選擇器的元素起做用。

9、僞元素選擇器

E:first-letter{...}：指定該CSS對E元素的第一個字符起做用；

E:first-line{...}：指定該CSS對E元素的第一行起做用；

E:before{...}：指定該CSS對E元素內容前添加相關內容；

E:after{...}：指定該CSS對E元素內容後添加相關內容。

後兩個選擇器須要結合與內容相關的屬性使用。

10、結構性 僞類選擇器

Selector:root{...}：對HTML文檔的根元素起做用；

Selector:first-child{...}：對知足選擇器，且是父元素的第一個子元素起做用；

Selector:last-child{...}：對知足選擇器，且是父元素的最後一個子元素起做用；

Selector:nth-child(n){...}：對知足選擇器，且是父元素的第n個子元素起做用；

Selector:nth-last-child(n){...}：對知足選擇器，且是父元素的倒數第n個子元素起做用；

Selector:only-child{...}：對知足選擇器，且是父元素惟一的子元素起做用；

Selector:first-of-type{...}：對知足選擇器，且是同類兄弟元素中的第一個元素起做用；

Selector:last-of-type{...}：對知足選擇器，且是同類兄弟元素中的最後一個元素起做用；

Selector:nth-of-type(n){...}：對知足選擇器，且是同類兄弟元素中第n個元素起做用；

Selector:nth-last-of-type{...}：對知足選擇器，且是同類兄弟元素中倒數第n個元素起做用；

Selector:only-of-type{...}：對知足選擇器，且兄弟元素中惟一該類型的元素起做用；

Selector:empty{...}：對知足選擇器且內部沒有任何子元素的元素起做用。

11、UI元素狀體僞類選擇器

Selector:link：知足選擇器且未被訪問過的元素；

Selector:visited：知足選擇器且已被訪問過的元素；

Selector:active：知足選擇器且處於被用戶激活狀態的元素，激活指在用戶鼠標點擊與釋放之間的事件；

Selector:hover：知足選擇器且處於鼠標懸停狀態的元素；

Selector:focus：知足選擇器且已獲得焦點的元素；

Selector:enabled：知足選擇器且當前處於可用狀態的元素；

Selector:disabled：知足選擇器且當前處於不可用狀態的元素；

Selector:checked：知足選擇器且當前處於選中狀態的元素；

Selector:default：知足選擇器且頁面打開時默認處於選中狀態的元素；

Selector:read-only：知足選擇器且處於只讀狀態的元素；

Selector:read-write：知足選擇器且處於讀寫狀態的元素；

Selector::selection：知足選擇器的元素中被選中的內容(注意前面是兩個冒號)；

Selector:target：知足選擇器且是命名錨點目標的元素；

Selector1:not(Selector2)：知足選擇器1且不知足選擇器2的元素。