COVID-19【新冠病毒、武漢肺炎】即時資訊:全球疫情台灣疫情
目前位置: 首頁 > HTML5、CSS3、其他 > CSS3新增的選擇器

CSS3新增的選擇器 超大 稍大 微大

發表於: 2015-03-18 最後更新: 現在時間:2021-01-19 14:26:00
後代級別選擇器
: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    - 選擇被使用者選取的元素部分
對於本站文章有任何問題或建議歡迎到 : 討論區寫信給我
本站提供ECSHOP技術支援, 是網路開店最佳選擇 ,最後更新時間: 現在時間:2021-01-19 14:26:00