关于css权重 #1
Description
css权重
权重的有什么用
解决css规则不生效问题
权重的五个等级
一条样式规则的整体权重包含四个独立的部分 : [A、B、C、D]
逐级比较，同级比数量
| 规则 | 权重等级 |
|---|---|
| 整体权重 | ABCD |
| !important | ~ |
| 行内样式 | 1000 |
| id选择器 | 0100 |
| 类、属性、伪类选择器 | 0010 |
| 类型、伪元素选择器 | 0001 |
| 通配符、继承的样式 | 0000 |
!important > 内联 > ID > 类 = 伪类 = 属性 > 标签(元素) = 伪元素 > 通配符
权重的使用规则
- 不推荐使用!important
!important根本没有结构与上下文可言，但是得知道怎么覆盖!important规则 : id选择器的important能覆盖class选择器的important
- 单独使用一个选择器的时候，不能跨等级使css规则失效
无论多少个class组成的类选择器，都没有一个ID选择器权重高，所以一般权重是在一个等级上才有可比性，在这里量变不能引起质变。
- 相邻选择器、兄长选择器、亲子选择器、后代选择器都拆分成两个选择器再进行计算。
- 当权重不同的选择器作用在同一元素上时，权重高的css规则生效
- 当权重相同的选择器作用在同一元素上是，后出现的css规则生效(网上还有离元素近的规则生效本质也是后出现的生效)