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
用于比對輸入值為非法的元素