Design Code 設計密碼

選擇器

例子

例子描述

CSS

.class

.intro

選擇 class="intro" 的所有元素。

1

#id

#firstname

選擇 id="firstname" 的所有元素。

1

*

*

選擇所有元素。

2

element

p

選擇所有 <p> 元素。

1

element,element

div,p

選擇所有 <div> 元素和所有 <p> 元素。

1

element element

div p

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

1

element>element

div>p

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

2

element+element

div+p

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

2

[attribute]

[target]

選擇帶有 target 屬性所有元素。

2

[attribute=value]

[target=_blank]

選擇 target="_blank" 的所有元素。

2

[attribute~=value]

[title~=flower]

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

2

[attribute|=value]

[lang|=en]

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

2

:link

a:link

選擇所有未被訪問的連結。

1

:visited

a:visited

選擇所有已被訪問的連結。

1

:active

a:active

選擇活動連結。

1

:hover

a:hover

選擇滑鼠指標位於其上的連結。

1

:focus

input:focus

選擇獲得焦點的 input 元素。

2

:first-letter

p:first-letter

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

1

:first-line

p:first-line

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

1

:first-child

p:first-child

選擇屬於父元素的第一個子元素的每個 <p> 元素。

2

:before

p:before

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

2

:after

p:after

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

2

:lang(language)

p:lang(it)

選擇帶有以 "it" 開頭的 lang 屬性值的每個 <p> 元素。

2

element1~element2

p~ul

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

3

[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

:first-of-type

p:first-of-type

選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素。

3

:last-of-type

p:last-of-type

選擇屬於其父元素的最後 <p> 元素的每個 <p> 元素。

3

:only-of-type

p:only-of-type

選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素。

3

:only-child

p:only-child

選擇屬於其父元素的唯一子元素的每個 <p> 元素。

3

:nth-child(n)

p:nth-child(2)

選擇屬於其父元素的第二個子元素的每個 <p> 元素。

3

:nth-last-child(n)

p:nth-last-child(2)

同上，從最後一個子元素開始計數。

3

:nth-of-type(n)

p:nth-of-type(2)

選擇屬於其父元素第二個 <p> 元素的每個 <p> 元素。

3

:nth-last-of-type(n)

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

同上，但是從最後一個子元素開始計數。

3

:last-child

p:last-child

選擇屬於其父元素最後一個子元素每個 <p> 元素。

3

:root

:root

選擇文檔的根項目。

3

:empty

p:empty

選擇沒有子元素的每個 <p> 元素（包括文本節點）。

3

:target

#news:target

選擇當前活動的 #news 元素。

3

:enabled

input:enabled

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

3

:disabled

input:disabled

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

3

:checked

input:checked

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

3

:not(selector)

:not(p)

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

3

​::selection

::selection

選擇被使用者選取的元素部分。

3