子元素選擇器

+兄弟選擇器

~通用兄弟節(jié)點選擇器p~b

[ ]通用選擇器

[id]附帶id屬性的

div[ id]div中具有[ id]通用他們之間沒有空格

[id][class]附帶id class 屬性的

/div中值為class="we"這個才會按照這個樣式顯示/

div[class="we"]{background: red;

color:red;

}

/div中以c開頭的才按這個樣式顯示/

div[class^="c"]{

background: green;

}

/div中以m結(jié)尾的才按這個樣式顯示/

div[class$="m"]{

background: blue;

}

/div中具有w的按這個樣式顯示/

div[class="w"]{

background: #ccc;

}

class^=“c" class$=“m”（以c開頭以m結(jié)尾class換成id也成）

/class里只有有其中一個屬性值就行*/

div[class~="bbba"]

{

background: red;

}

:target目標(biāo)

偽類；

可用

不可用

input:enabled{

background-color: blue;

}

input:disabled{

background-color: red;

}

input:checked{

background-color: green;

}選中變化

p:first-child{

color: red;

}第一個元素變

last最后一個元素變

empty空元素變

only只有一個

input：not（[type=“text]）{

}不是type=“text按這個顯示

first-letter首字

：：selection選中的變

：before在什么前面

:after在上面后面

{content:能容}

counter

/重置計數(shù)器/

body{

counter-reset: charpter;

}

/通過counter（）實現(xiàn)計數(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;

文／李仁平（簡書作者）

原文鏈接：http://www.itdecent.cn/p/fd8387881c48

著作權(quán)歸作者所有，轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，并標(biāo)注“簡書作者”。