想想我們之前用過的css
選擇器,有標籤選擇器,有類(
.class
)選擇器,有id(
#id)選擇器,有後代選擇器,有群組選擇器,還有基於以上延伸出來的選擇器,例如
div .class
等這類混合行選擇器。
css3新增了很多特性,圓角、邊框、背景、選擇器等、每乙個都拯救
web開發人員於水火之中,接下來,本文主要介紹
css3
新新增的選擇器。
直奔主題:
通用選擇器:
e~fp~ul
匹配前面有
元素的每個
元素。屬性選擇器:
匹配其 src
屬性值以
開頭的每個
元素。e[att$=」
val」
]a[src$=".pdf"]
匹配其 src
屬性值以 ".pdf"
結尾的所有
元素。e[att*=」
val」
]a[src*="abc"]
匹配其 src
屬性值中包含 "abc"
子串的每個
元素。偽類選擇器:
與使用者有關的偽類選擇器
e:enabled
input:enabled
匹配每個啟用的
元素。e:disabled
input:disabled
匹配每個禁用的
元素e:checked
input:checked
匹配每個被選中的
元素。:selection
::selection
匹配被使用者選取的元素部分。
結構性偽類
e:root
:root
匹配文件的根元素。
e:last-child
p:last-child
匹配父元素的最後乙個子元素
等同於:nth-last-child(1)
e:nth-child(n)
p:nth-child(2)
匹配其父元素的第n
個子元素,第乙個編號為
1e:nth-last-child(n)
p:nth-last-child(2)
同上,從最後乙個子元素開始計數。
e:nth-of-type(n)
p:nth-of-type(2)
與:nth-child()
作用類似,但是僅匹配使用同種標籤的元素
e:nth-last-of-type(n)
p:nth-last-of-type(2)
與:nth-last-child()
作用類似,但是僅匹配使用同種標籤的元素
e:first-of-type
p:first-of-type
匹配父元素下使用同種標籤的第乙個子元素
等同於:nth-of-type(1)
e:last-of-type
p:last-of-type
匹配父元素下使用同種標籤的最後乙個子元素
等同於:nth-last-of-type(1)
e:only-child
p:only-child
匹配父元素下僅有的乙個子元素
等同於:first-child:last-child或
:nth-child(1):nth-last-child(1)
e:only-of-type
p:only-of-type
匹配父元素下使用同種標籤的唯一乙個子元素
等同於:first-of-type:last-of-type或
:nth-of-type(1):nth-last-of-type(1)
e:empty
p:empty
匹配乙個不包含任何子元素的元素,注意,文字節點也被看作子元素
反選偽類選擇器
e:not(s)
:not(p)
匹配不符合當前選擇器的任何元素
突顯當前活動的偽類選擇器
e:target
:target
url 帶有後面跟有錨名稱
#,指向文件內某個具體的元素。這個被鏈結的元素就是目標元素
(target element)
。:target 選擇器可用於選取當前活動的目標元素。
這個比較難理解,上**:
<html
>
<
head
>
<
style
>
:target
style
>
head
>
<
body
>
<
p><
a href
="#news1"
>跳轉至內容 1
a>
p>
<
p><
a href
="#news2"
>跳轉至內容 2
a>
p>
<
p id
="news1"
><
b>內容 1...
b>
p>
<
p id
="news2"
><
b>內容 2...
以上為css3
選擇器篇。
參考:
CSS3 選擇器篇
如同人類的的進化一樣,css3是css2的進化版本,在css2基礎上,增強或新增了許多特性,彌補了css2的眾多不足之處,使得web開發變得更為高效和便捷 css當js用 js當後台語言用 瀏覽器支援程度差,需要新增私有字首 移動端 a webkit 谷歌 google b moz 火狐 firef...
css3選擇器篇
標籤選擇器 陳業貴陳業貴 陳業貴陳業貴 核心 給html標籤設定相應的css屬性。精確的 id選擇器 identity1 1111 identity2 1111 identity3 1111 identity4 1111 核心 唯一 同一頁面內 標籤命名規則 4.1id的名稱只能由字母 數字 下劃線...
css3 選擇器 CSS3選擇器
子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素,則不會被選擇。符號之前書寫父級的選擇器,符號之後寫子級選擇器,必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...