元素選擇器

子元素選擇器
+兄弟選擇器
通用兄弟節(jié)點(diǎn)選擇器pb
[ ]通用選擇器
[id]附帶id屬性的
div[ id]div中具有[ id]通用他們之間沒有空格
[id][class]附帶id class 屬性的
/div中值為class="we"這個(gè)才會(huì)按照這個(gè)樣式顯示/
div[class="we"]{background: red;
color:red;
}
/div中以c開頭的才按這個(gè)樣式顯示/
div[class^="c"]{
background: green;
}
/div中以m結(jié)尾的才按這個(gè)樣式顯示/
div[class$="m"]{
background: blue;
}
/div中具有w的按這個(gè)樣式顯示/

div[class="w"]{
background: #ccc;
}
class^=“c" class$=“m”(以c開頭以m結(jié)尾class換成id也成)
/
class里只有有其中一個(gè)屬性值就行*/
div[class~="bbba"]
{
background: red;
}
<div class="bbba xxxs cccz"></div>

:target目標(biāo)

偽類;
<input enabled>可用
<input disabled>不可用
input:enabled{
background-color: blue;
}
input:disabled{
background-color: red;
}
input:checked{
background-color: green;

}選中變化

p:first-child{
color: red;
}第一個(gè)元素變
last最后一個(gè)元素變
empty空元素變
only只有一個(gè)

input:not([type=“text]){
}不是type=“text按這個(gè)顯示

first-letter首字
::selection選中的變

:before在什么前面
:after在上面后面
{content:能容}
counter
/重置計(jì)數(shù)器/
body{
counter-reset: charpter;
}
/通過counter()實(shí)現(xiàn)計(jì)數(shù)/
h1:before{
content: "第"counter(charpter)"章"
}
/指定增長幅度/
h1{counter-increment: charpter;

}
-webkit-
-zom-
p{width: 300px;
/分成三列/
column-count:3;
/列間的間隔/
column-gap:20px;
/列間虛線/
column-rule:2px dashed red;

}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容