CSS高阶知识点-CSS权值计算方法 | w3cschool笔记
1.CSS 权值不同时,权值高的优先;
2.CSS 权值相同时,后定义的规则优先;
3.CSS 属性后面加 !important 时,无条件绝对优先;
只要得知权值的大小,就可以根据上面的规则进行比较。
权重计算包括四位:a, b, c, d。官方文档
- a 位置是否有
style=" "内联写法,有的话权重计算结果是 1,0,0,0 - b 位置表示计算选择器中 ID 属性的数量,有一个 ID 选择器那么权重计算结果是 0,1,0,0
- c 位表示 class 选择器、属性选择器、伪类选择器的数量,例如一个 class 选择器权重计算结果是 0,0,1,0
- 元素选择器(包括伪元素选择器如
:first-line)权重计算结果是 0,0,0,1
通用选择器(*),子选择器(>),后代选择器( ),相邻同胞选择器(+)、交集选择器(两个选择器紧挨着)、并集选择器(,)等选择器:权重为0。
根据权值计算公式,得出一个四元组,通过逐一比较四元组的大小,得出权重的大小。
比如有一权重计算结果为(1,0,2,4),另一权重计算结果为(1,0,2,3),则应用第一种权重所属的选择器。