選擇器

.class

類對應的元素。

#id

對應的id元素。

*

全部元素

div{}

對應的標簽

div,p{}

全部的div和p

div p{}

div下全部的p標簽

div>p{}

div下的第一代子標簽。

div+p{}

僅僅作用於div後一個p,假設後一個不是p則沒有作用效果。

p~ul{}

選取同一個父元素的p之後全部的ul。

a[target]

作用於全部帶target屬性的a標簽。

a[target=_blank]

作用於全部target屬性值為_blank的元素。

[title*=flower]

匹配title中包括flower的元素。應用範圍更廣。

[title~=flower]

title中包括flower的對應元素。強調一整個的單詞。

a[src$=".pdf"]

匹配屬性src以.pdf結尾的a標簽。

[lang^=en]

[lang|=en]//|=以...開頭

lang規定了元素的語言。

|=選取以en開頭的對應的元素。

|=之後跟的是單詞，通常應用於lang。

p:lang(en)//lang選擇器

選擇lang屬性以en開頭的p元素。

a：link

：link用於選取未訪問過的鏈接的元素。

a：visited

：visited用於選取訪問過的鏈接的元素。

a：active

：active選取活動鏈接時的狀態，活動鏈接指的是點擊後即為活動，能夠按下鼠標不松開查看效果。

a：hover

:hover適用於全部元素，設置鼠標浮動在上面時的效果。

input：focus

當獲得焦點時的狀態，即點擊輸入框要用鍵盤輸入時。

p:first-letter

為段落中的首字母設置效果。

p:first-line

為段落中的首行設置效果。

p:first-of-type

選取身份為父元素的首個p元素。

p:last-of-type

選取身份為父元素的最後一個p元素。

p:only-of-type

假設作為唯一的p子元素，則觸發狀態。

p:nth-of-type(2)

第二個p元素。

p:nth-last-of-type(2)

與上同理，倒著數。

p:first-child

選取身份為父元素的首個子元素的p標簽。

p:last-child

最後一個子元素，且為p標簽。

p:only-child

作為唯一的子元素。

p:nth-child(2)

作為父元素的第二個子元素，是p標簽，則觸發。

p:nth-last-child(2)

與上同理。從最後一個元素開始計數。

p:before

在每一個p元素前插入內容。

p:after

在每一個p元素之後插入內容。

:root

設置根元素。即html文檔的屬性。

p:empty

沒有子元素的p元素。

:target

當前活動的錨，錨是本頁面跳轉的鏈接，活動的貓指的是點擊錨點轉到時被轉到的地方被覺得是活動的。

:enabled

指示已啟用的。經常使用於表單上。

:disabled

指示未啟用的。同上。

:not(p)

除了p元素的全部元素

::selection{}

為頁面上已選中的文字等設置樣式。

Css 選擇器總結