CSS选择器优先级(权重)
通过不同的选择器,选中相同的元素,并且为相同的样式名设置不同的值时,就发生了样式的冲突。到底应用哪个样式,此时就需要看优先级了。
- 简单描述
行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器
- 详细描述
- 计算方式:每个选择器,都可计算出一组权重,格式为:
(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) |
- 比较规则:按照从左往右的顺序,依次比较大小,当前位胜出后,后面不再对比,例如:
(1, 0, 0) > (0, 2, 2)
(1, 1, 0) > (1, 0, 3)
(1, 1, 3) > (1, 1, 2)
3:特殊规则
- 行内样式权重大于所有选择器
2.!important
的权重,大于行内样式,大于所有选择器,权重最高!
CSS三大特性
- 层叠性
如果元素的同一个样式名,被设置了不同的值,那就会根据一定的规则(选择器优先级),进行样式的层叠(覆盖) - 继承性
元素会自动拥有其父元素、或祖先元素上所设置的某些样式
优先继承离得近的
常见继承属性:
text-?? ,font-?? ,line-?? ,color......
- 优先级
!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式
注意:并集选择器的每一个部分是分开算的!!!
举例(看下图):
注意:此处计算权重是分开计算,但最后还是计算在一起,此处权重应该是(0, 0, 3)