首頁 > HTML5、CSS3、其他 > CSS3新增的選擇器

後代級別選擇器
:only-child
例子：p:only-child    - 匹配屬於父元素中唯一的<p> 元素

:nth-child(n)   
例子：p:nth-child(2)    - 匹配父元素中的第2個<p>子 元素。n 可以是數位、關鍵字或公式
Odd 和 even 是可用於匹配下標是奇數或偶數的子元 素的關鍵字（第一個子元素的下標是 1）   

:nth-last-child(n)   
例子：p:nth-last-child(2)    - 同上，從最後一個子元素開始計數

:first-child   
例子：p:first-child    - 選擇屬於父元素的第一個子元素的每個 <p> 元素

:last-child   
例子：p:last-child    - 選擇屬於其父元素最後一個子元素每個 <p> 元素

:root   
例子：:root    - 選擇文檔的根項目

:empty   
例子：p:empty    - 選擇沒有子元素的每個 <p> 元素（包括文本節點）

同輩級別選擇器
element+element   
例子：div+p    - 選擇緊接在 <div> 元素之後的所有 <p>元素。CSS    2

element1~element2   
例子：p~ul    - 選擇前面有 <p> 元素的每個 <ul> 元素

:first-of-type   
例子：p:first-of-type    - 匹配同級兄弟元素中的第一個<p> 元素

:last-of-type   
例子：p:last-of-type    - 匹配同級兄弟元素中的最後一個<p> 元 素

:only-of-type   
例子：p:only-of-type     - 匹配屬於同類型中只有唯一兄弟元素的p   

:nth-of-type(n)   
例子：p:nth-of-type(2)    - 匹配同類型中的第n個同級兄弟元素p n 可以是數位、關鍵字或公式
Odd 和 even 是可用於匹配下標是奇數 或偶數的子元素的關鍵字（第一個子元 素的下標是 1）   

:nth-last-of-type(n)   
例子：p:nth-last-of-type(2)    - 同上，但是從最後一個元素開始計數

偽類別選取器
:target   
例子：#news:target    - 選擇當前活動的 #news 元素   

屬性選擇器
[attribute^=value]   
例子：a[src^="https"]    - 選擇其 src 屬性值以 "https" 開頭的每個 <a> 元素

[attribute$=value]   
例子：a[src$=".pdf"]    - 選擇其 src 屬性以 ".pdf" 結尾的所有 <a> 元素

[attribute*=value]
例子：a[src*="abc"]    - 選擇其 src 屬性中包含 "abc" 子串的每個 <a> 元素

UI偽類別選取器
:enabled
例子：input:enabled    - 選擇每個啟用的 <input> 元素

:disabled   
例子：input:disabled    - 選擇每個禁用的 <input> 元素   

:checked
例子：input:checked    - 選擇每個被選中的 <input> 元素

:not(selector)
例子：:not(p)    - 選擇非 <p> 元素的每個元素

::selection
例子：::selection    - 選擇被使用者選取的元素部分

如果你對CSS3新增的選擇器有任何問題請到討論區發帖。