css权重
CSS层叠性
在讲css权重之前需要理解的是css的层叠性。css具有继承性，层叠性。下面是对层叠性的简单理解：
1）同一个HTML标签，可以被多个选择器选中，并且可以被共同作用得到最终的样式
2）css处理冲突的能力，相同作用的样式通过权重来决定，而且不存在任何兼容性问题
什么是css权重
若对同一个元素定义不同的样式，浏览器会根据样式规则的权重来决定到底对该元素运用哪一条样式，权重值高的css规则生效。若对样式规则的权重不够理解，经常会出现明明写好的样式死活就是不起作用的情况。
下面介绍样式规则的权重是怎么计算的
- 一个id选择器的权重是100
- 一个class选择器，属性选择器，伪类选择器（：hover等）的权重是10
- 一个标签选择器，伪元素选择器（：：before等）权重是1
- 内联样式的权重比所有选择器的都要大
- ！important的权重是额外特指的，加给谁谁就特别大
注意：
1）！important提升的只是一个属性而不是一个选择器，正确的写法是：
p{
color:red!important;//分号写在最外面，添加在那个属性上就提升哪个属性的权重
font-size:16px;//没有加!important,所有不会提升权重
}
2） !important无法提升继承的权重，该是0还是0
HTML结构
<div>
<p>垃圾分类</p>
</div>
css样式
div{
color:red !important;
}
p{
color:blue;//直接被选中显示蓝色
}
3)!important不影响就近原则
HTML结构
<div>
<ul>
<li>垃圾分类</li>
</ul>
</div>
css样式
div{
color:red !important;
}
ul{
color:blue;//都没有被直接选中的情况下，ul描述的更近,显示蓝色
}
4）建议少用!important
等级关系
!important>行内样式>ID选择器 > 类选择器 | 属性选择器 | 伪类选择器 > 元素选择器
如何判断浏览器会选择哪一个样式？
注意：
- 谁在后面听谁：按照代码的从上到下的解析顺序，排在最后面的被选中，原理为样式的层叠替代原则
- 这里的选中指的是选中当前元素
HTML结构
<div class='box1'>
<ul class='box2'>
<li>垃圾分类</li>
</ul>
</div>
css样式
#box1 li{
color:red;//直接选中权重相同
}
#box2 li{
color:blue;//直接选中权重相同，按照代码顺序，本条规则在在上一条权重一样的规则下面，显示蓝色
}
- 就近原则，谁描述的近听谁指的是：选择器选择到的深度越靠近那个元素就被选中
HTML结构
<div>
<ul>
<li>垃圾分类</li>
</ul>
</div>
css样式
div{
color:red;//都没有被直接选中的情况下,div是ul的外层，深度比不上ul
}
ul{
color:blue;//都没有被直接选中的情况下，ul描述的更近,显示蓝色
}
