1. 选择器的权值
- 权值:选择器的针对性越强,权值越高。
- 权值排序:!important > 行内样式 > id > 类 | 伪类 | 属性 > 标签 > 通配符。
选择器 | 权值 |
---|---|
继承,通配符等 | 0.1 |
标签选择器 | 1 |
类、伪类、属性选择器 | 10 |
id选择器 | 100 |
行内样式 | 1000 |
!important | 无穷大 |
某些浏览器下:1个类选择器 = 255标签选择器,1个ID选择器 = 255个类选择器
2. 计算权值
2.1 多个选择器同时命中元素或都没有命中元素
- 先比较权重,权重大的有效
- 相同权重下,写在后面的属性层叠掉前面的属性
2.2 多个选择器有的命中有的没有命中元素
- 直接命中的选择器下的属性层叠掉继承属性
并集选择器的权重要分开计算
2.3 !important
<style>
#demo3 {
/* !improtant只针对单个属性,而不是选择器 */
color: pink!important;
}
</style>