css选择器
使用css选择器基本流程:
1.制作所需的选择器,并在其中写入样式
2.将选择器绑定到指定的html标签上
标签选择器:
用标签名来定义
作用:当前页面中,所有叫这个名字的标签,全部都绑定上样式
代码示例:
div{
width: 200px;
height: 200px;
background-color:yellow;
}
class选择器:
用 . 来表示自身
自定义名称(名称符合见明之意即可)
命名时:可以包含数字字母下划线,但是不能以数字开头,具有重用性,可以给多个标签使用
使用时:使用给对应的标签进行绑定,例如<div class=".box"></div>
class的优先级高于标签选择器
代码示例:
.box{
width: 500px;
color: red;
}
id选择器:
用#来标示
自定义名称(名字符合见名知意即可)
命名时:可以包含字母数字下划线,但是不能以数字开头
id选择器不具有重用性, 具有唯一性
如果多个标签同时使用,会造成不可预知的错误
id选择器要比class选择器的高
代码示例:
#div1{
width: 100px;
height: 100px;
background-color: pink;
font-size: 30px;
}
群组选择器:
只能用于大批量的样式,如果需要给个别标签去写样式,使用Class或id
代码示例:
p,span,div,li{
color: blue;
}
子代选择器:
>前 是指定的父级
>后 是指定的子级
子代选择器,只对指定的父级向下一层寻找目标
代码示例:
.list2>li{
color: red;
}
后代选择器:
空格前是指定的父级
空格后是指定的子级
后代选择器,对指定的父级下所有的层级寻找目标
代码示例:
.list2 li{
color: #ccc;
}
特殊的选择器:
交叉选择器
两个条件必须同时满足,才可以绑定样式
条件1: p
条件2: .p1
注意:两个条件之间没有特殊字符也没有空格,无缝连接
代码示例:
p.p1{
color: red;
}
CSS样式存在继承性:
1.父级的样式会继承给子级
2.如果子级不需要,单独调整子级即可