子元素選擇器
+兄弟選擇器
通用兄弟節(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;
}