CSS的层叠机制原理

CSS层叠机制

声明冲突

当同一个标签，它的声明属性名相同，属性值不同，则产生“声明冲突”

如果发生声明冲突，浏览器会自动触发“层叠机制”

什么是层叠：

层叠是一种机制，用于解决css声明冲突

层叠的过程：

1比较优先级

2比较特殊性

3比较源次序

比较优先级：

每一个声明都有一个优先级
当发生冲突时，优先级高的会保留，优先级低的会淘汰
一个声明的优先级，与它的来源与重要性有关：

    设置重要性是在某条重要的声明后添加:!important
    color: darkblue !important;

1浏览器默认样式表的声明

2作者样式表的普通声明

3用户样式表的普通声明

4作者样式表的重要声明

5用户样式表的重要声明

比较特殊性：

每一个声明都有一个特殊性
当发生冲突时，特殊性高的会保留，特殊性低的会被淘汰
一个声明的特殊性，取决于规则适用范围的大小
规则适用范围越大，特殊性越低，规则范围越小，特殊性越高

行内选择器>ID选择器>类选择器、伪类选择器、属性选择器>元素选择器、伪元素选择器>通配符选择器

比较特殊性的具体规则：

在比较特殊性，每一个冲突的声明,会生成4个数字（a，b，c，d），以比较特殊
性a越大，特殊性越高，若a相同，比较b，b越大，特殊性越高，以此类推…
a若声明是行内样式，则为1，否则为0
b规则是ID选择器的个数
c规则是类选择器，伪类选择器，属性选择器的个数
d规则是元素选择器，伪元素选择器的个数
当计算选择器分组的时候，要分开计算

比较源次序：

当发生冲突时，谁后写谁胜出