(一)优先级定义:基于不同种类选择器组成的匹配规则;
(二)作用:浏览器通过优先级来判断哪一些属性值与一个元素最为相关,从而在该元素上应用这些属性值。
(三)优先级的计算:
- 多个CSS声明优先级相等的时候,最后的声明才会作用在元素上;
- 当有多个CSS声明作用在一个元素上时,才会体现出优先级的作用;
- 当没有CSS声明直接作用于元素上时,元素会从祖先元素上继承某些有继承性的样式声明。
何为层叠?
当向一个元素应用某些值的时候,要考虑声明的继承,特殊性以及来源,此为层叠。
所以我们需要考虑的是:
- 在同一来源根据选择器的特殊性排列出优先级;
- 将不同来源的值按照(外联 || 内联 < 行内)进行优先级排序。
(四)选择器的特殊性值
选择器的特殊性值表述为4个部分,用0,0,0,0表示。
- ID选择器的特殊性值,加0,1,0,0。
- 类选择器、属性选择器或伪类,加0,0,1,0。
- 元素和伪元素,加0,0,0,1。
- 通配选择器*对特殊性没有贡献,即0,0,0,0。
- 最后比较特殊的一个标志!important(权重),它没有特殊性值,但它的优先级是最高的,为了方便记忆,可以认为它的特殊性值为1,0,0,0,0。
当有多个声明时,使用哪个呢?
- 计算每个声明的优先级,然后选择特殊性值最高的那个。
- 如果特殊性值一样,选择最后声明的那个。
- 特殊性值没有进位,特殊性值1,0,0,0大于以0开头的所有特殊性值,比如0,99,99,99。
- 通配选择器*的特殊性值是0,0,0,0,而元素通过父元素继承过来的样式是没有特殊性值的,所以,通配选择器定义的规则优先级高于元素继承过来的规则的优先级。
- 行间样式的特殊性是1,0,0,0。行间样式的优先级比ID选择器优先级高。
- !important太特殊了,尽量少用。
参考:
https://www.cnblogs.com/wangmeijian/p/4207433.html
https://zhuanlan.zhihu.com/p/31765252
https://juejin.im/post/5afa98bf51882542c832e5ec