关于css权重

[zonglang]

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规则生效(网上还有离元素近的规则生效本质也是后出现的生效)