偽元素選擇器
first-line匹配內(nèi)容的第一行元素
first-letter ? ? 匹配內(nèi)容的第一個(gè)字符
:before{
content:"內(nèi)容"; ? ? ? ? ?在一個(gè)元素之前插入內(nèi)容
}
:after{
content:"內(nèi)容"; ? ? ? ? ?在一個(gè)元素之后插入內(nèi)容
}
::selection{
color:#000;
background:#000;
} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 使元素鼠標(biāo)點(diǎn)擊滑過(guò)文字后，有顏色變化效果
目標(biāo)偽類選擇器
TAB菜單切換效果
:target{}
div:target{
width: 100px;
height: 200px;
background-color: orange;
}
狀態(tài)偽類選擇器
常適用input標(biāo)簽
:disabled ? ? ? ? ?禁用
:enabled ? ? ? ? ?非禁用
:read-only ? ? ? ? ?只讀
:focus ? ? ? ? ?獲得焦點(diǎn)——這個(gè)要放在其他情況下面才能生效碎税，權(quán)重低药薯。
:checked ? ? ? ? ?選中
獲得焦點(diǎn):
禁 ? ? 用:
非禁用:
只 ? ?讀:
選中:
結(jié)構(gòu)偽類選擇器
:root ? ? ? ? ?根元素(一般指的是body)
:empty ? ? ? ? ?內(nèi)容為空的元素
----------- 不常用 -------------
:first-child ? ? 第一個(gè)
:last-child ? ? 最后一個(gè)
:nth-child(n) ? ? 找到第n個(gè)元素
:nth-last-child(n) ? ? 找到倒數(shù)第n個(gè)元素
:only-child ? ? 找到屬于其父元素的唯一子元素的每個(gè)元素
------------- 常 用 -------------
:first-of-type ? ? ? ? ?找到第一個(gè)元素
:last-of-type ? ? ? ? ?找到最后一個(gè)元素
:nth-of-type(n) ? ? ? ? ?找到指定的第n個(gè)元素
:nth-last-of-type(n) ? ? ? ? ?找到指定的倒數(shù)第n個(gè)元素
:only-of-type ? ? ? ? ?找到屬于父元素的特定類型的唯一子元素的每個(gè)元素
:nth-of-type(odd) ? ? ? ? ?找到元素中的奇數(shù)元素
:nth-of-type(even) ? ? ? ? ?找到元素中的偶數(shù)元素
否定偽類選擇器
:not ? ? ? ? ?找到除了not出來(lái)的元素
選擇器找的非指定元素
屬性選擇器
通過(guò)元素的屬性或?qū)傩灾祦?lái)獲取元素
[value] ? ? ? ? ? ? ? [屬性名]選擇某個(gè)屬性的元素
[value][name] ? ? ? ? ? ? ? [屬性名][屬性名]可同時(shí)篩選多個(gè)
input[value] ? ? ? ? ? ? ? 匹配條件[屬性名]
[value = "按鈕"] ? ? ? ? ?[屬性名 = "屬性值"]選取某個(gè)指定屬性值的元素
[name ~= "b"] ? ? ? ? ?[屬性名 ~= "屬性值1 2 3 4"]選取具有某個(gè)屬性且包含的所有屬性
[name |= "inner"] ? ? ? ? ?[屬性名 != "屬性值"]具有某個(gè)屬性凭舶，且屬性值以某些字符串作為前綴
[name *= "按鈕"] ? ? ? ? ?[屬性名 *= "屬性值"]包含某些字符的
[name ^= "inner"] ? ? ? ? ?[屬性名 ^= "屬性值"]以某些字符開(kāi)頭的
[name $= "html"] ? ? ? ? ?[屬性名 $= "屬性值"]以某些字符結(jié)尾的
