css3新增加的選擇器

2022-04-03 05:04:40 字數 1045 閱讀 5654

一、屬性選擇器:

e[attr] 只要有屬性名

e[attr=value] 屬性名=屬性值

e[attr~=blue] 包含這個blue整個單詞就可以

e[attr^=c] 以這個字母c開頭的

e[attr$=b] 以這個字母b結尾的

e[attr*=a] 只要包含a這個字母就行

e[attr|=z] 只要以字母z-開頭的或者就是字母z的

二、結構性偽類選擇器:

e:nth-child(n) 第n個子節點

div:nth-child(odd) 奇數行

div:nth-child(even) 偶數行

div:nth-child(2n) 2的倍數

e:nth-last-child(n) 倒數第n個

三、其他:

e:empty 空元素

e:first-child 第乙個子節點、和 e:nth-child(1)等價

e:last-child 倒數第乙個、和 e:nth-last-child(1)等價

* 注意不能有其他兄弟節點

e:target 錨點元素的樣式

div:target

只要錨點有#div1那上面的target樣式就會生效

e:disabled 表單元素設定disabled

e:enabled 可點選的表單元素

e:checked 表示已經選中的checkbox或者radio

文字新增偽類:

e:first-line 第一行

e:first-letter 第乙個字

e::selection 選中文字的時候

e::before e標籤前面新增東西,需要配合content來用

e::after e標籤後面新增東西

e:before e:after單引號也能用

e:not(s) 不包括s

h1:not(.red) 排除有class為red的h1元素

e~f e後面的f兄弟節點

css3 新增的選擇器

1.css3新增的3個屬性選擇器 attribute value eg a src https 選擇其 src 屬性值以 https 開頭的每個 元素。attribute value eg a src pdf 選擇其 src 屬性以 pdf 結尾的所有 元素 所以可以使用css3實現不同檔案給與不同...

CSS3 新增的選擇器

css3新增的三個模組 關係選擇器 e f下乙個滿足條件的兄弟元素節點 e f並列結構下滿足條件的兄弟元素節點 屬性選擇器 偽元素選擇器 效果偽類選擇器 描述 被選中的元素一種狀態 e not s 真實應用於為ul下面的li新增下線,最後乙個不新增。不會出現線重疊 e root e target 被...

css3 選擇器 CSS3選擇器

子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素,則不會被選擇。符號之前書寫父級的選擇器,符號之後寫子級選擇器,必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...