[屬性名 = 「屬性值」] (完全等於)
eg:
li[class = "a"] 選擇class為完全等於a的li節點
class
="a"
>
222li
>
class
="b a"
>
333li
>
只能匹配值為222的li,不能匹配333的li
eg:
li[class ~= "a"] 選擇class屬性值中包含a的li節點
class
="a"
>
222li
>
class
="b a"
>
333li
>
兩個li都能匹配到
eg:
li[class ^= "a"] 選擇class屬性值中以a開頭的li節點
111li
>
222li
>
333li
>
只能匹配到值為111與222的li
*=(存在) 屬性值中只有有目標值即可
選中所有沒有一點內容(空格注釋也算內容)或不在dom樹中(使用after等新增的偽元素)的節點
注釋內容
--\>
li>
li>
li>
[class ^= "b"]::after
li:empty
兩個li標籤都會被選中
選中當前被錨住的元素
將被a標籤錨住的元素變成圓形
111a
>
222a
>
333a
>
1div
>
2div
>
3div
>
.box
a:target
目標元素:first-child 是目標元素的型別且是第乙個子元素目標元素:last-child 是目標元素的型別且是最後乙個子元素
目標元素:nth-child(?) 是目標元素的型別且是第n個子元素(引數為even時選擇偶數,為odd時選擇奇數)
目標元素:nth-last-child(?) 是目標元素的型別且是倒數第n個子元素
弊端:首先要滿足是第幾個子元素,其次型別還得與目標元素一致
>
spanspan
>
>
one lili
>
>
>
111li
>
>
222li
>
>
333li
>
ul>
span:first-child
只有值為111的li被選中了,
雖然span是body的第乙個子元素,但是節點型別不是li
目標型別:first-of-type 會選擇目標型別中的第乙個子元素目標型別:nth-of-type(n) 會選擇目標型別中的第n個子元素
他會首先選擇是目標型別的所有子元素,然後再選擇其中第n個
li:first-of-type
>
spanspan
>
>
>
111li
>
>
222li
>
>
333li
>
ul>
>
one lili
>
>
two lili
>
值為111與one li的節點會被選中
:enabled
:disabled
type
="text"
>
type
="text"
disabled
>
css3 選擇器 CSS3選擇器
子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素，則不會被選擇。符號之前書寫父級的選擇器，符號之後寫子級選擇器，必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...
css3 選擇器 CSS3選擇器詳解
css3在css2基礎上，增強或新增了許多特性，彌補了css2的眾多不足之處，使得web開發變得更為高效和便捷。比如說，同樣是乙個頭像，可能在低版本的瀏覽器中，頭像方的 在高版本的瀏覽器中，頭像是圓的。漸進增強和優雅降級之間的不同 面試題目 由於css3普遍存在相容性問題，為了避免因相容性帶來的干擾...
css3學習筆記 css3選擇器
e attr 屬性選擇器 e attr val 屬性選擇器 e attr val 屬性選擇器 e attr val 屬性選擇器 e attr val 屬性選擇器 e attr val 屬性選擇器 e attr val 屬性選擇器 css ul,li lihtml class linksitem id...