@layer 声明必须位于 css 文件或 块最顶部，仅允许前面有 @charset 或注释；位置错误会导致整条语句被浏览器静默忽略，且第三方样式默认落入隐式顶层，优先级高于所有显式层。
必须把所有 @layer 声明放在 CSS 文件最顶部，否则整条语句会被浏览器静默忽略——这不是警告，是解析器硬性截断规则。
为什么你的 @layer 声明根本没生效
常见错误现象：DevTools 的 Styles 面板里完全看不到 layer: base 这类标识，Computed 面板中被覆盖的规则 Layer 列为空。根本原因不是写错了语法，而是声明位置违规。
-
@layer必须是 CSS 文件（或<style></style>块）中第一个非空、非注释的语句 - 前面允许纯注释（如
/* reset layer */）和空行，但不能有@import、:root、选择器、甚至一个空格 -
@charset是唯一例外，可放在第一行，但必须紧贴开头且带引号 - Vite/webpack 构建后失效？大概率是没启用
postcss-cascade-layers插件，旧版 PostCSS 会直接删掉整行，不报错也不提示
@import "xxx.css" layer(framework) 必须写成顶层语句
不能嵌套在 @layer framework { } 块内，这种写法非法且被浏览器忽略。正确路径只有一条：把它和 @layer 声明并列，放在文件最上方。
- 正确：
@import url("antd.css") layer(framework);（注意 URL 必须带引号，末尾分号不能漏） - 错误：
@layer framework { @import "antd.css"; }→ 解析失败，@layer framework整体被跳过 - 第三方 CSS 若不支持
layer()导入（如老版本 Element Plus），只能手动复制内容粘贴进@layer framework { /* paste here */ } - 多个框架可导入同名层：
@import "tailwind.css" layer(framework);和@import "bootstrap.css" layer(framework);会自动合并
层内覆盖仍要守选择器特异性规则
@layer 控制的是“层间优先级”，不是“层内免死金牌”。进了 @layer overrides，不代表你能靠一个 .btn 覆盖 .ant-btn.ant-btn-primary。
- 检查被划掉规则的 Specificity 值（如
0,0,2,0），它比你写的0,0,1,0高，照样赢 - 不要幻想靠层跳过权重：想安全覆盖 Ant Design 按钮，得写
@layer overrides { .ant-btn.my-theme { } }，而不是裸写.my-button - 媒体查询必须和样式写在同一层内：
@media (min-width: 768px) { .card { padding: 2rem; } }单独写，不包裹在@layer块里，就掉回未命名顶层 - 禁止跨层混写：不要在
@layer framework里塞自定义 BEM 类名，这会让语义和层职责脱钩
最容易被忽略的点是：第三方样式默认不进任何层，而是直接落入隐式顶层——这个隐式层天然高于你所有显式声明的 @layer。你以为收编了，其实它还在外面站着，随时准备压你一头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
