@layer 通过层序优先级覆盖选择器权重，未命名顶层最高，层声明须位于css文件最前且需构建工具支持；层内仍需按特异性规则竞争。
层顺序直接压倒选择器权重
@layer 不改单条规则的特异性计算，但会让整层样式在层间排序中“赢过”前面所有层——哪怕你用 .btn（特异性 0,0,1,0）写在 @layer overrides 里，也能覆盖 @layer framework 中的 #modal .ant-btn-primary（特异性 1,0,2,0）。浏览器级联顺序是：先比层序，再比层内顺序，最后才看选择器权重。跨层时，权重根本没机会比。
未命名顶层永远最高，第三方样式默认卡在这里
直接 @import "antd.css" 或 <link rel="stylesheet"> 引入的 CSS，不会进任何你声明的层，而是落入「未命名顶层」。它的优先级天然高于所有 @layer xxx 块。这不是 bug，是规范行为。常见翻车点：
- 你在
@layer custom { .my-btn { color: red; } }里写了覆盖样式，但 Ant Design 的 CSS 是裸引入的 → 它赢 - DevTools 的 Computed 面板里，被划掉的规则右侧没有
layer: custom标识 → 说明它根本没进层 - 正确收编方式只有两种：
@import "antd.css" layer(framework);（顶层语句），或手动复制内容粘贴进@layer framework { /* paste here */ }
@layer 声明位置错一个字符就全失效
浏览器解析器遇到第一个非 @layer 的语句（哪怕是一行 @import、一个 :root、甚至带样式的注释），就会硬性截断，后续所有 @layer 声明被忽略。不是报错，是静默丢弃。
- 错误写法：
@import "reset.css"; @layer base, components;→@layer被忽略 - 错误写法：
/* 全局变量 */ :root { --color: #000; } @layer components { }→@layer components不生效 - 正确结构：CSS 文件开头只允许空行、纯注释（不含任何样式内容）、然后紧跟
@layer reset, base, components, utilities; - 构建工具如 Vite/webpack 必须启用
postcss-cascade-layers插件，否则旧版 PostCSS 会直接删掉整条@layer语句
层内仍要认真算选择器权重，别指望“进高层就躺赢”
@layer 只管层间顺序，不豁免层内规则的胜负逻辑。同一层里，#header .btn（0,1,1,0）依然赢过 .btn.primary（0,0,2,0）；跨层时，@layer custom { .my-btn } 能压过 @layer framework { .ant-btn }，但压不过 @layer framework { #modal .ant-btn }。
- 验证方法：DevTools → Computed 面板 → 看被划掉规则右侧的
Specificity值（格式如0,1,0,0） - 对策：覆盖高权值第三方规则时，不要只调层，还要同步升级本层选择器，例如写成
.ant-btn.ant-btn-primary.my-theme而非单纯.my-btn -
!important在跨层场景下完全失效，且会绕过层机制，让规则脱离你的分层设计意图
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
