選擇器

例子

例子描述

Css

Element Element

Div p

選擇<div>元素內部的所有<p元素>

1

Element>element

div>p

選擇父元素為<div>元素的所有子代<p>元素

2

:only-child

P:only-child

匹配屬於父元素中唯一的<p>元素，如果其父元素中含有其他元素，那將不會被匹配

3

:nth-child(n)

P:nth-child(2)

匹配父元素中的第2個<p>子元素，n可以是數字、關鍵字或公式。Odd和even是可用於匹配下標奇數或偶數的子元素。第一個子元素下標是1

3

:nth-last-child(n)

P:nth-last-child(2)

同上，只不過從最後一個子元素開始計數

3

:first-child

P:first-child

選擇屬於父元素的第一個子元素的每個<p>元素，第一個子元素必須是p

3

:root

:root

選擇文檔的根元素

3

:empty

P:empty

選擇沒有子元素的每個<p>元素(包括文本節點)

3

選擇器

例子

例子描述

Css

Element+element

Div+p

選擇緊接在<div>元素之後的<p>元素

2

Element~element2

P~ul

選擇前面有<p>元素的每個<ul>元素

3

:first-of-type

P:first-of-type

匹配同級兄弟元素中的第一個<p>元素

3

:last-of-type

P:last-of-type

匹配同級兄弟元素中的最後一個<p>元素

3

:only-of-type

P:only-of-type

匹配屬於同類型中只有唯一兄弟元素的p元素

3

:nth-of-type(n)

P:nth-of-type(2)

匹配同類型中的第n個同級兄弟元素p

3

:nth-last-of-type(n)

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

同上，只不過從最後一個開始計數

3

選擇器

例子

例子描述·

Css

:link

a:link

選擇所有未被訪問的鏈接

1

:visited

a:visited

選擇所有已被訪問的鏈接

1

:active

a:actied

選擇活動鏈接

1

:hover

A:hover

選擇鼠標指針位於其上的鏈接

1

:focus

Input:focus

選擇獲得焦點的input元素

2

:first-letter

P:first-letter

選擇每個<p>元素的首字母

1

:first-line

P:first-line

選擇每個<p>元素的首行

1

:before

P:before

在每個<p>元素的內容之前插入內容

2

:after

P:after

在每個<p>元素的內容之後插入內容

2

:target

#news:target

選擇當前活動的#news元素

3

:root

:root

選擇文檔的根元素

3

選擇器

例子

例子描述

Css

[attribute]

[target]

選擇帶有target屬性所有元素

2

[attribute=value]

[tar=_blank]

選擇target=”_blank”的所有元素

2

[attribute~=value]

[title~=flower]

選擇title屬性包含單詞”flower”的所有元素

2

[attribute|=value]

[lang|=en]

選擇lang屬性值以”en”開頭的所有元素

2

[attribute^=value]

a[src^=”https”]

選擇其src屬性值以”https”開頭的每個<a>元素

3

[attribute$=value]

a[src=”.pdf”]

選擇器src以”.pdf”結尾的所有<a>元素

3

[attribute*=value]

a[src*=”abc”]

選擇其src屬性包含”abc”子串的每個<a>元素

3

選擇器

例子

例子描述

Css

:enabled

Input:enabled

選擇每個啟用的<input>元素

3

:disabled

Input:disabled

選擇每個禁用的<input>元素

3

:checked

Input:checked

選擇每個被選中的<input>元素

3

:not(selector)

:not(p)

選擇非<p>元素的每個元素

3

::selection

::section

選擇被用戶選取的元素部分

3