覆盖声明的顺序

相互冲突的声明将按以下顺序应用，后一种声明将覆盖前一种声明：

1. 用户代理样式表中的声明（例如，浏览器的默认样式，在没有设置其他样式时使用）。
2. 用户样式表中的常规声明（由用户设置的自定义样式）。
3. 作者样式表中的常规声明（这些是我们 web 开发人员设置的样式）。
4. 作者样式表中的 !important 声明
5. 用户样式表中的 !important 声明
6. 用户代理样式表中的 !important 声明

这叫做“层叠来源优先权”，是最上层的排序。

级联层的顺序

不在层内的视为放在最后的一层

p {/*...*/}

@layer firstLayer, secondLayer;

<==>

@layer firstLayer, secondLayer;

@layer {
	p {/*...*/}
}

后面的覆盖前面的，important 反过来

@layer fa,fb,fc;

fa
fb
fc
!important in fc
!important in fb
!important in fa

同层内按照优先级规则处理。

总结

这就是样式的比较顺序，下面的会覆盖上面的。在同一层没法比较就跳到上一个兄弟那层比。

1. 选择器优先权
   1. 顺序
   2. 元素选择器数量
   3. class 数量
   4. id
2. 层叠层优先权
   1. 按声明顺序展开
   2. 没在层内的当作最后一层
   3. 含!important的按声明逆序展开
3. 层叠来源优先权
   1. 用户代理普通样式
   2. 用户普通样式
   3. 作者普通样式
   4. 正在动画的样式
   5. 作者重要样式
   6. 用户重要样式
   7. 用户代理重要样式
   8. 正在过渡的样式