CSS级联层样式权重和优先级

CSS 的级联层（Cascade Layers）、样式权重（Specificity） 和 优先级（Priority） 是决定浏览器最终采用哪条样式规则的核心机制。
我们可以把它理解为一个“决策流程”：

---

🧩 一、级联层（Cascade Layers）

层（layer） 是 CSS 从 CSS Cascade Level 5 引入的新概念，用来更清晰地管理不同来源或模块的样式优先级。

1. 定义层

@layer reset, base, theme, components, overrides;

或定义并写入样式：

@layer base {
   
   
  h1 {
   
    color: black; }
}
@layer theme {
   
   
  h1 {
   
    color: b