CSS选择器
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>
效果:想要啥样就弄啥样
6.由块级标签变成行内知识
.dis-inline {
/*由块级标签,变成行内标签*/
display: inline;
}
.dis-block{
/*行内转 块*/
display: block;
}
.dis-block-inline{
/*既是块也是行内*/
display: inline-block;
}
<div class="dis-inline bc-1">块div 变成行内</div>
<span class="dis-block bc-1">行变成块</span>
<span class="dis-block-inline wh bc-1">即是块也是行</span>
7,内边距外边距
.wai{
border: 1px solid red; # 1像素的红色实线
width: 100px;
height: 100px;
}
.nei{
border: 1px solid blue;
width: 50px;
height: 50px;
/*上下右左*/
margin: 20px 30px 10px 40px;
}
引用上面的class选择器
<div class="wai">
<div class="nei"></div>
</div>