天天看點

CSS 選擇器

CSS選擇器用于選擇你想要的元素的樣式的模式。

"CSS"清單示在CSS版本的屬性定義(CSS1,CSS2,或對CSS3)。

選擇器

示例

示例說明

CSS

.class

.intro

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

1

#id

#firstname

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

*

選擇所有元素

2

element

p

選擇所有<p>元素

element,element

div,p

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

element element

div p

選擇<div>元素内的所有<p>元素

element>element

div>p

選擇所有父級是 <div> 元素的 <p> 元素

element+element

div+p

選擇所有緊跟在 <div> 元素之後的第一個 <p> 元素

[attribute]

[target]

選擇所有帶有target屬性元素

[attribute=value]

[target=-blank]

選擇所有使用target="-blank"的元素

[attribute~=value]

[title~=flower]

選擇标題屬性包含單詞"flower"的所有元素

[attribute|=language]

[lang|=en]

選擇 lang 屬性等于 en,或者以 en- 為開頭的所有元素

:link

a:link

選擇所有未通路連結

:visited

a:visited

選擇所有通路過的連結

:active

a:active

選擇活動連結

:hover

a:hover

選擇滑鼠在連結上面時

:focus

input:focus

選擇具有焦點的輸入元素

:first-letter

p:first-letter

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

:first-line

p:first-line

選擇每一個<p>元素的第一行

:first-child

p:first-child

指定隻有當<p>元素是其父級的第一個子級的樣式。

:before

p:before

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

:after

p:after

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

:lang(language)

p:lang(it)

選擇一個lang屬性的起始值="it"的所有<p>元素

element1~element2

p~ul

選擇p元素之後的每一個ul元素

3

[attribute^=value]

a[src^="https"]

選擇每一個src屬性的值以"https"開頭的元素

[attribute$=value]

a[src$=".pdf"]

選擇每一個src屬性的值以".pdf"結尾的元素

[attribute*=value]

a[src*="runoob"]

選擇每一個src屬性的值包含子字元串"runoob"的元素

:first-of-type

p:first-of-type

選擇每個p元素是其父級的第一個p元素

:last-of-type

p:last-of-type

選擇每個p元素是其父級的最後一個p元素

:only-of-type

p:only-of-type

選擇每個p元素是其父級的唯一p元素

:only-child

p:only-child

選擇每個p元素是其父級的唯一子元素

:nth-child(n)

p:nth-child(2)

選擇每個p元素是其父級的第二個子元素

:nth-last-child(n)

p:nth-last-child(2)

選擇每個p元素的是其父級的第二個子元素,從最後一個子項計數

:nth-of-type(n)

p:nth-of-type(2)

選擇每個p元素是其父級的第二個p元素

:nth-last-of-type(n)

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

選擇每個p元素的是其父級的第二個p元素,從最後一個子項計數

:last-child

p:last-child

選擇每個p元素是其父級的最後一個子級。

:root

選擇文檔的根元素

:empty

p:empty

選擇每個沒有任何子級的p元素(包括文本節點)

:target

#news:target

選擇目前活動的#news元素(包含該錨名稱的點選的URL)

:enabled

input:enabled

選擇每一個已啟用的輸入元素

:disabled

input:disabled

選擇每一個禁用的輸入元素

:checked

input:checked

選擇每個選中的輸入元素

:not(selector)

:not(p)

選擇每個并非p元素的元素

::selection

比對元素中被使用者選中或處于高亮狀态的部分

:out-of-range

比對值在指定區間之外的input元素

:in-range

比對值在指定區間之内的input元素

:read-write

用于比對可讀及可寫的元素

:read-only

用于比對設定 "readonly"(隻讀) 屬性的元素

:optional

用于比對可選的輸入元素

:required

用于比對設定了 "required" 屬性的元素

:valid

用于比對輸入值為合法的元素

:invalid

用于比對輸入值為非法的元素