css权重的理解：
每一个css的选择器都有一个相对的重要程度值，也就是权重的值，简称“权值”；
css通过css选择器的权重占比，来计算css选择规则的总权值，从而确定 定义样式规则的 优先级次序；
权重计算规则：
根据 W3 标准中的规定, css selector 分为 4 种 type: a, b, c, d. 他们的数目计算规则为:
- a: 如果 css 属性声明是写在
style=“”中的, 则数目为 1, 否则为 0 - b: id 选择器的数目
- c: class 选择器, 属性选择器(如
type=“text”), 伪类选择器(如:::hover) 的数目 - d: 标签名(如:
p,div), 伪类 (如::before)的数目
在比较不同 css selector 的权重时, 按照 a => b => c => d 的顺序进行比较.
css选择规则的优先级 是按照 css选择器的权值的比较 来确定的
由第一个 selector type a 的计算规则可知: 写在 html 代码 style 属性中的 css 相较写在 css 选择器中的 css 属性具有最高的优先级.
而 id selector (b) 相较 class selector (c) 有更高的优先级. 这也和我们平时的经验相吻合.
css优先级规则：
1.css选择规则的权值不同时，权值高的优先；
2.css选择规则的权值相同时，后定义的规则优先；
3. css属性后面加 !important 时，无条件绝对优先；
除了上面 Specificity 计算规则中的 css 选择器类型, 还有一些选择器如: *, +, >,:not() 等. 这些选择器该如何计算其权重呢?
答案是这些选择器并不会被计算到 css 的权重当中 :)
有一个需要特别注意一下的选择器: :not(), 虽然它本身是不计权重的, 但是写在它里面的 css selector 是需要计算权重的.
如果 a,b,c,d 算完都一样, 怎么办?
默认行为是: 当 specificity 一样时, 最后声明的 css selector 会生效.
如果我重复同样的 css selectory type, 权重会增加吗?
重复的 css selector, 其权重会被重复计算.但是不会超越上一级选择器的权重。
!important
按照 MDN的说法, !important 是不在 css 选择器的权重计算范围内的, 而它之所以能让 css 选择器生效是因为浏览器在遇见 !important 时会进行特殊的判断. 当多个 !important 需要进行比较时, 才会计算其权重再进行比较.
通常来说, 不提倡使用 !important. 如果你认为一定要使用, 不妨先自检一下:
- 总是先考虑使用权重更高的 css 选择器, 而不是使用
!important - 只有当你的目的是覆盖来自第三方的 css(如: Bootstrap, normalize.css)时, 才在页面范围使用
!important - 永远不要 在你写一个第三方插件时使用
!important - 永远不要在全站范围使用
!important
\
