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