元素选择器

子元素选择器
+兄弟选择器
通用兄弟节点选择器pb
[ ]通用选择器
[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结尾的才按这个样式显示/
div[class$="m"]{
background: blue;
}
/div中具有w的按这个样式显示/

div[class="w"]{
background: #ccc;
}
class^=“c" class$=“m”(以c开头以m结尾class换成id也成)
/
class里只有有其中一个属性值就行*/
div[class~="bbba"]
{
background: red;
}

:target目标

伪类;
可用
不可用
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
/重置计数器/
body{
counter-reset: charpter;
}
/通过counter()实现计数/
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;

}

你可能感兴趣的:(元素选择器)