权重解决了什么问题
CSS 权重是为了解决当多个 CSS 规则应用于同一个元素时,哪个规则将优先应用的问题。
demo
css 定义了两条规则,都指向了最里面的div, 为何只有第一条被采用了?
权重
权重确定那一条规则会被执行
!important>行内样式>ID选择器 > 类选择器 | 属性选择器 | 伪类选择器 > 元素选择器
如何计算权重
- !important: 的取值是无穷大
- 行内: 1000
- id: 100
- class 伪类 属性: 10
- 统配: 1
将选择器按照对应的权重相加即可得到权值,
规则
- 权值越大,越优先.
- 权值相同, 后会覆盖前.