@layer规则需顶层声明、第三方样式显式导入命名层且构建环境支持，否则静默失效；裸导入的CSS默认落入隐式最高层，优先级高于所有显式层；正确做法是用@import url() layer(name)语法在独立文件首行导入，并确保层声明顺序正确。
原生 CSS3 的 @layer 规则能管理引入样式的层级，但必须满足三个硬性条件：层名声明在最顶部、第三方样式显式导入到命名层、构建环境支持 cascade layers 特性；漏掉任一条件，它就静默失效，你看到的仍是传统层叠结果。
为什么裸导入的第三方 CSS 总是压过你的自定义规则
直接用 <link href="bootstrap.css"> 或 @import "antd.css"; 引入的样式，默认落入「未命名顶层」——这是浏览器规定的隐式最高层，优先级天然高于所有你写的 @layer base、@layer components 等显式层。这不是 bug，是规范行为。
- DevTools 的 Styles 面板里，被划掉的规则若右侧没有
layer: components这类标识，说明它根本没进层 - 打开 Computed 面板，看同元素上被覆盖的规则，其
Layer列为空，就是典型未收编现象 - 哪怕你写了
@layer overrides { .btn { color: red; } }，只要 Bootstrap 是裸导入，它的.btn.btn-primary依然赢
如何把第三方 CSS 正确塞进指定层
不能写 @layer framework { @import "xxx.css"; } —— 这是非法语法，@import 不允许嵌套在 @layer 块内。唯一合规路径是顶层 @import url() + layer() 导入。
- 新建一个独立 CSS 文件（如
layers.css），开头只允许空行或纯注释（/* */），然后第一行写：@import url("node_modules/bootstrap/dist/css/bootstrap.min.css") layer(framework); -
url()内路径必须可解析：Vite 别名需生效，CDN 地址必须带https://，且引号不能少 -
layer(framework)括号里只能填一个已声明过的层名，不能加引号，也不能写layer("framework") - 语句必须以分号结尾，漏掉会导致后续所有
@layer声明被浏览器忽略 - 老版本 UI 库（如 Element Plus v2.3）不支持
layer()导入？那就手动复制其 CSS 内容，粘贴进@layer framework { /* paste here */ }
@layer 声明顺序和位置的致命细节
@layer reset, framework, components, overrides; 这类语句不是可有可无的装饰，它是整个层体系的骨架——必须出现在整个项目所有 CSS 的最顶部（比如 main.css 开头），且不能重复声明同名层。
立即学习“前端免费学习笔记（深入）”；
- 前面不能有任何非空行/纯注释的内容：
@charset是唯一例外，但必须是第一行；@import、:root、空格、甚至一个制表符都会导致解析器截断，后续所有@layer失效 - 层名本身不包含样式，只是占位和排序；
@layer overrides必须在@layer framework之后声明，否则覆盖无效 - 你的自定义规则必须包在
@layer overrides { }里，裸写.btn { }会掉回隐式顶层，可能被框架里更重的选择器反杀 - Vite 用户需确认版本 ≥ 4.5，或手动在
postcss.config.js中启用postcss-cascade-layers插件；旧版 PostCSS 会静默删掉整条@import url() layer()语句，连警告都没有
最容易被忽略的是：层内仍受选择器特异性约束。@layer overrides 并不等于免死金牌，.btn.my-theme 未必赢过 @layer framework { .btn.btn-primary }——得看 Specificity 值，不是进了高一层就能跳过权重计算。
