@layer 仅在严格满足层声明位置、第三方样式收编及层结构完整时生效；否则静默失效，回归传统层叠。
@layer 能解决样式冲突，但只在你严格控制层声明位置、显式收编第三方样式、且不破坏层结构时才生效；漏掉任一条件，它就静默失效，你看到的仍是传统层叠结果。
为什么写了 @layer overrides 但还是盖不住第三方样式
第三方 CSS（比如 antd.css 或 bootstrap.css）默认不进任何层，而是落入「未命名顶层」——这个隐式层优先级高于所有你写的 @layer 命名层。这不是 bug，是规范行为。
- 验证方式：打开 DevTools → Elements → Styles 面板，看被划掉的规则右侧有没有
layer(overrides)这类标识；没有，说明它根本没进你的层 - 常见翻车点：
<link href="antd.css">放在 HTML 里比你的样式靠前，结果它的按钮反而赢了你后写的@layer overrides { .btn } - 错误写法：
@layer framework { @import "antd.css"; }——@import不能嵌套在@layer块内，整条语句会被浏览器忽略
怎么把第三方 CSS 正确塞进指定层
必须用顶层 @import 语句配合 layer() 参数，且该语句必须出现在 CSS 文件最顶部（前面不能有空行、注释、@charset 以外的任何内容）。
- 正确写法：
@import url("antd.css") layer(framework);（注意：URL 必须带引号，语句必须以分号结尾） - 路径是相对于当前 CSS 文件，不是 HTML 页面
- 如果库不支持
layer()导入（如老版本 Element Plus），就得手动复制其 CSS 内容，粘贴进@layer framework { /* paste here */ } - 某些现代库（如 Tailwind v3.4+、Bootstrap 5.3+）已原生导出
@layer，但需确认其层名是否与你项目中一致——@layer components和@layer Components是不同层
@layer 声明顺序错位会导致完全失效
@layer reset, base, framework, overrides; 这类层名声明语句，必须出现在整个 CSS 文件或 <style></style> 标签的第一行，前面不能有任何其他内容——包括注释、空行、@import、变量定义，甚至一个空格都不行。
立即学习“前端免费学习笔记（深入）”；
- 常见错误：
@layer base;写在reset.css文件中间，或夹在两个组件样式块之间 - Vite/webpack 构建后发现层名消失？大概率是 PostCSS 插件未启用
postcss-cascade-layers，旧版会直接删掉整条@layer语句，还不报错 - 一旦解析器遇到第一个非
@layer语句，后续所有@layer规则都会被忽略，DevTools 里也看不到层标识
层内仍受选择器特异性约束，不是进了高层就“免死”
@layer 只控制「层间」优先级，不豁免「层内」选择器权重。同一层里，#header .btn（0,1,1,0）依然赢过 .btn.custom（0,0,2,0）；跨层时，@layer overrides { .btn } 能压过 @layer framework { .ant-btn }，但压不过 @layer framework { #modal .ant-btn }。
- 现象：
@layer custom { .my-btn { color: red; } }没覆盖 Ant Design 的.ant-btn-primary，因为后者特异性是 0,0,2,0，而你的只是 0,0,1,0 - 验证方法：打开 DevTools → Computed 面板 → 看被划掉规则右侧的
Specificity值（格式如0,0,2,0） - 对策：在
@layer custom内同步升级本层选择器，例如写成.ant-btn.my-theme，而不是幻想靠层序跳过特异性
真正难的不是写 @layer，而是确保所有参与排序的样式都显式归属到命名层、所有 @layer 声明都在文件最顶、所有第三方 CSS 都被 layer() 显式导入或手动包裹——少一个环节，就退回原始混乱。
