@layer 声明必须位于所有样式规则之前，否则浏览器将忽略整个规则；不可嵌套，第三方样式需显式注入某层，层内仍受选择器特异性约束，不支持运行时修改层序，需预定义主题层并配合属性选择器切换。
@layer 声明必须在所有样式规则之前
否则浏览器会忽略整个 @layer 规则，导致层定义失效。这不是警告，是硬性限制——CSS解析器遇到非 @layer 的普通样式后，就不再接受后续的 @layer 声明。
常见错误现象：@layer base; 写在 reset.css 文件末尾，或夹在两个组件样式块中间，DevTools 里完全看不到层名，Styles 面板也查不到层信息。
- 正确写法：把所有
@layer声明集中放在 CSS 文件最顶部（或<style></style>标签第一行） - 如果用构建工具（如 Vite、Webpack），确保 postcss 插件（如
postcss-cascade-layers）已启用，否则旧环境会直接丢弃@layer - 不能嵌套：不支持
@layer foo { @layer bar { ... } }，这会被当作语法错误
第三方库样式必须显式注入到某一层
直接 @import 或 <link> 引入的第三方 CSS 不会自动归属到任何层，它仍按传统层叠规则参与计算，权重由选择器决定——也就是说，它依然可能被你后面写的普通类覆盖，也可能反过来压垮你的样式。
使用场景：你用了 Ant Design，想把它整体放进 framework 层，再用 custom 层安全覆盖。
- 不要：
@import "antd/dist/reset.css";（它不属于任何层） - 要：
@layer framework { @import "antd/dist/reset.css"; } - 更稳妥：把第三方 CSS 内容复制进
@layer framework { ... }块内（避免@import加载时序问题） - 注意：某些 UI 库自带
@layer（如现代版 Chakra UI），此时需确认其层名是否与你定义的冲突
层内规则仍受选择器特异性约束
@layer 控制的是“层间优先级”，不是“层内免死金牌”。同一层里，.btn.primary 依然赢不过 #header .btn，哪怕后者写在更早的层里。
容易踩的坑：以为只要把自定义样式放进更高层（如 @layer custom），就能无条件覆盖框架的 .button；结果发现没生效，其实是框架用了 .ant-btn.ant-btn-primary（特异性 0,0,2,0），而你写了 .my-button（0,0,1,0）。
- 验证方法：打开 DevTools →
Computed面板 → 看被划掉的规则右侧的Specificity值（如0,0,2,0） - 对策：层内仍要写合理的选择器，比如
@layer custom { .ant-btn.my-theme { ... } }，而不是幻想靠层跳过特异性 - 别滥用
!important：它会绕过层机制，让规则脱离层控制流，破坏设计初衷
动态切换主题时 layer 顺序不能 runtime 修改
@layer 的顺序是静态声明决定的，无法用 JS 改变 @layer dark, light; 的先后关系来切换优先级。试图用 document.styleSheets 注入新层也不会重排已有层顺序。
真正可行的做法是预定义多套层结构，用媒体查询或属性选择器隔离：
- 推荐：
@layer theme { [data-theme="dark"] .btn { background: #333; } }，配合 JS 切换data-theme - 不推荐：试图用 JS 动态插入
@layer light { ... }并指望它压过已存在的@layer dark - 兼容性兜底：Safari 15.4+、Chrome 99+、Firefox 101+ 支持，老版本需用
postcss-cascade-layers编译降级
层不是魔法开关，它是组织规则的容器；覆盖逻辑最终仍落在选择器设计和 HTML 结构上，这点最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
