层叠概述

Posted 2020-11-01 xiegang

层叠是一种机制，用于解决CSS声明冲突。（a,b,c,d）
声明冲突：多个相同的CSS声明，应用到同一个元素上。
层叠机制

1.比较优先级
当发生冲突时，优先级高的会保留，优先级低的会被淘汰。
一个声明的优先级，与它的来源和重要性有关。
来源：作者样式表、浏览器默认样式表、用户样式表
重要性：属性值后跟上！important，则表示一条重要声明
示例：color：red !important;
优先级（只针对开发者）：浏览器<作者的普通声明<作者的重要声明

2.比较特殊性
每一个声明都有一个特殊性（specificity），特指值或度。
发生冲突，也属性高保留，低淘汰。
特属性，取决于规则使用范围的大小。
规则适用范围越大，特殊性越低，适用范围越小，特殊性越高。
特殊性： 行内样式表>id选择器>类选择器>元素选择器>通配符选择器
a越大也属性越高若a相同则比较b，依次类推
a:声明行内样式，声明为1，否则为0。
b:规则中id选择器的个数。
c:规则中类选择器、伪类选择器和属性选择器个数。
d:规则中元素选择器、伪元素选择器的个数。
当计算选择器分组的时候，要分开计算。

3.比较源次序
最后出现的声明生出，其他的全部淘汰。