css常用选择器
CSS选择器的分类
标签选择器
直接把标签名当做选择器来用
语法：标签选择器{css属性名：css属性值；}
权重：1
<style>
div{color:red;}
</style>
<div>div1</div>
<div>div1</div>
<div>div1</div>
类选择器
将HTML元素的class标签属性值当做选择器来用，需要在标签属性值的前面加“.”
权重：10
class的标签属性值（类名）可以重复使用
class的标签属性值（类名）可以有多个，类名与类名之间用空格隔开
<style>
div{ 权重1
color: red;
}
.div2{ 权重10
color: green;
}
</style>
<div>div1</div>
<div class="div2">div2</div>
ID 选择器
将HTML元素的id标签属性值当做选择器来用，需要在标签属性值的前面加“#”
权重：100
id 选择器在HTML页面中具有唯一性，ID名（标签属性值）不能重名，也不能重复使用
id选择器是配合javascript使用的
<style>
.div{
color: red;}
#div{
color: pink;}
</style>
<div class="div">我是div</div>
<div id="div">我是div</div>
标签选择器相当于人的姓，类选择器相当于人的姓名，id选择器相当于人的身份证
通配符选择器
匹配了所有HTML元素
权重：0<*<1
通配符选择器在项目中不使用，因为比较消耗性能
清除所有标签默认样式（间距）
*{margin:0;padding:0;}
后代选择器（派生选择器）
在一个根元素的范围内，去查找它的后代元素
语法：祖辈选择器 后代选择器（中间空格隔开）
权重：所有选择器权重相加之和
<style>
.div1 ul li apan{color：red；}
</style>
<div class="div1">
<ul><li><span>我是div</span></li></ul>
</div>
分组选择器
将一份CSS样式，分别给了不用的HTML元素
语法：选择器1，选择器2，选择器3{CSS样式}
权重：是独立计算的，不会叠加
<style>
p,h1,.box{
width:100px;
height:100px;
background-color:red;}
</style>
<p>p标签</p>
<h1>我是H1</h1>
<div class="box">我是div</div>
子级选择器
存在包含关系，通过父级来确定子级元素
语法：父级选择器>子级选择器
权重：所有选择器权重相加之和
如果使用子级选择器，必须是父子紧邻的关系，不能跨辈
<style>
.div1>ul>li{color:red;}
</style>
<div class="div1">
<ul>
<li>1111</li>
</ul>
</div>
标签属性选择器
利用标签属性当做选择器来用
语法：[标签属性名]{}
[标签属性名=标签属性值]{}
权重：10
当标签中有class类名时，一般不用标签属性选择器，用类选择器
[class]{color:red;} [title]{color:red;}
<div class="box" title="zf">珠峰培训</div>
交集选择器
两种选择器同属一个元素的时候，可以使用交集选择器来进行元素的准确选择
权重：所有选择器权重组合相加之和
交集选择器是有哪些选择器组合的？
**标签选择器和类选择器**、**标签选择器和标签属性选择器**、标签选择器和id选择器、类选择器和id选择器、标签属性选择器和id选择器、类选择器和标签属性选择器