jiedinghui 2019-12-03
1.id选择器
i1{
background-color: green;
width: 100px;
height: 100px;
}
2.class选择器
c1{
background-color: green;
width: 100px;
height: 100px;
}
.wh{
width: 100px;
height: 100px;
}
.bc-1{
background-color: red;
}
.bc-2{
background-color: blue;
}
不同颜色 相同宽高的正方型 class属性允许有多个,通过空格分隔即可
<div class="wh bc-1"></div>
<div class="wh bc-2"></div>
3.标签选择器
div {
background-color: green;
}
所有的div都是绿色的
<div class="wh">1111</div>
4.层级选择器 很少用
div span{
background-color: red;
}
效果:dsx是红色,后面是绿色
<div>
<span>dsx</span>
</div>
5.属性选择器(自定义选择器)
div[dsx="nb"]{
background-color: red;
}
<div dsx="nb" class="wh"></div>
效果:想要啥样就弄啥样