CSS3 選擇器篇

2022-07-29 04:30:12 字數 3019 閱讀 3062

想想我們之前用過的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 的直接子元素,則不會被選擇。符號之前書寫父級的選擇器,符號之後寫子級選擇器,必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...