切记CSS选择器的权重关系,避免在页面中出现CSS样式无法生效的情况~
– | 内嵌 | id | class | 元素 |
---|---|---|---|---|
– | a | b | c | d |
内嵌 | 1 | 0 | 0 | 0 |
id | 0 | 1 | 0 | 0 |
class、属性、伪类 | 0 | 0 | 1 | 0 |
元素、伪元素 | 0 | 0 | 0 | 1 |
通配符* | 0 | |||
!improtant(写在声明中,更改权重值) | 最高 |
- a组数值只有把CSS写进style属性时才会为1,否则为0;
- b组数值决定于ID选择器,有多少ID选择器,并会进行此数组值累加;
- c组数值决定于类选择器,有多少类选择器,并会进行此数组值累加;
- d组数值决定于元素选择器,有多少元素选择器,并会进行此数组值累加。
总结:
- 权重不进位;
- 内嵌权重级别最高,内联外联无权重关系,只存在先后顺序;
- 权重相同时,后覆盖前。