Cascade Layers:@layer
前面几页讲的都是「同一层里值怎么定」（见四层默认样式）。但 author origin 内部还能再分层:@layer 把你的 CSS 分进若干有序的 cascade layer。cascade 比较优先级时，layer 的先后顺序在 specificity 之前就先分胜负——后声明的 layer 整体赢过先声明的，哪怕它里面的选择器 specificity 更低。
- 层的顺序由第一次出现的次序决定；一句
@layer reset, base, theme;就能预先钉死顺序，后面块写哪都不影响。 - 越靠后的 layer 优先级越高。同一元素被多层命中时，先看在不在更高的 layer,再轮到 specificity。
- 没进任何 layer 的「unlayered」规则，优先级高于所有 layered 规则（可理解为永远排在最后一层之后）。
注意默认这局：三条规则里 specificity 最高的是 #demo #lk（在 reset 层），最低的是 #demo a（在 theme 层）。可链接最后是 theme 的紫色——specificity 最低的那条反而赢了，仅因 theme 是最后一层。把 reset 拖到末尾，赢家直接换成橙色；但它赢不是因为 id 选择器 specificity 高，而是因为此时它在最后一层。
开 unlayered 看：那条 #demo a.lk 没写在任何 @layer 里，于是无视层顺序一直赢——这就是「unlayered > 所有 layered」。所以迁移老代码时，把第三方/旧样式塞进低优先 layer、自己的新样式留在 unlayered，就能不依赖提高 specificity 也稳定覆盖。
1 · 两条容易判断错的规则
| 场景 | 结果 | 为什么 |
|---|---|---|
layered vs unlayered（都不带 !important） |
unlayered 赢 | unlayered 排在所有 layer 之后 |
两条都带 !important |
层顺序反转 | !important 下：越靠前的 layer 反而越高，且 important-unlayered 最低 |
和 revert-layer 的关系：本页讲层之间怎么比;四个 CSS-wide 关键字里的 revert-layer 则是在分层 CSS 里把某属性退回前一个 layer 的值——一个定优先级，一个撤回本层，配套使用。
延伸阅读：MDN · @layer 与 CSS Cascade 5 · Cascade Layers——嵌套 layer(@layer a.b)、匿名 layer、以及
!important 反转的规范定义。