4、选择器的优先级
通过不同的选择器,选中相同的元素 ,并且为相同的样式名设置不同的值时,就发生了样式的冲突。 到底应用哪个样式,此时就需要看优先级了。
一、简单理解优先级:
行内样式>ID选择器>类选择器>元素选择器>通配选择器
二、详细理解优先级:
1、按权重计算:(a,b,c)
a:ID选择器个数
b:类选择器、伪类选择器、属性选择器个数
c:元素选择器、伪元素选择器个数
例如:
选择器 | 权重 |
ul>li | (0,0,2) |
div ul>li p a span | (0,0,6) |
#atguigu .slogan | (1,1,0) |
#atguigu .slogan a | (1,1,1) |
#atguigu .slogan a:hover | (1,2,1) |
神奇宝贝介绍:vscode鼠标放到样式名称上面,可以显示权重,如下图:
2、比较规则:按照从左到右的顺序,依次比较大小,当前位胜出后,后面的不再对比,例
(1,0,0) > (0,2,2) (1,1,0) > (1,0,3) (1,1,3) > (1,1,2)
3、特殊规则:
1、行内样式权重大于所有选择器。
2、 !important 的权重,大于行内样式,大于所有选择器,权重最高! (慎用,一般用在需要紧急修复生产bug,但是开发测试无法定位的问题的时候)
<style>
.test{
color : green !important;
}
</style>