@layer 能控制 CSS 优先级，但需将第三方样式显式收编进命名层且声明必须位于文件最顶部；未收编的第三方 CSS 默认落入高优先级的未命名顶层，导致自定义规则被覆盖。
@layer 能控制多个引入 CSS 的优先级，但必须把所有第三方样式显式收编进命名层，且层名声明必须出现在整个 CSS 文件最顶部——漏掉任一条件，它就静默失效，你看到的仍是传统层叠结果。
为什么第三方 CSS 总是压过你的自定义规则
没被 @layer 收编的引入样式（比如直接 @import "bootstrap.css" 或 <link href="antd.css">）默认落入「未命名顶层」，浏览器规定它的优先级高于所有显式声明的命名层。这不是 bug，是规范行为。
- DevTools 的 Styles 面板里，被划掉的规则若右侧没有
layer: components这类标识，说明它根本没进层 - 哪怕你写了
@layer overrides { .btn { color: red; } }，只要 Bootstrap 的 CSS 是裸导入，它就天然赢 - 检查方式：打开 Computed 面板，看同元素上被覆盖的规则，其 Layer 列是否为空
必须把 @layer 声明放在 CSS 文件最顶部
浏览器解析器遇到第一个非 @layer 的语句（哪怕是一行注释、@import、:root 变量定义，甚至一个空格）后，就停止接受后续所有 @layer 声明——这不是警告，是硬性截断。
- 错误写法：
@import "reset.css"; @layer base;→@layer base被忽略 - 错误写法：
/* 全局变量 */ :root { --color: #000; } @layer components { }→@layer components不生效 - 正确写法：CSS 文件开头只允许空行、纯注释（不含样式内容），然后紧跟
@layer reset, framework, components, overrides; - 构建环境（Vite/webpack）需启用
postcss-cascade-layers插件，否则旧版 PostCSS 会直接删掉整条语句，还不报错
怎样把多个第三方 CSS 安全塞进指定层
不能用 @layer vendor { @import "xxx.css"; } —— 这种写法非法，@import 不能嵌套在 @layer 块内。正确做法只有两种：
立即学习“前端免费学习笔记（深入）”；
- 用
@import url("xxx.css") layer(framework);（注意是顶层语句，URL 必须带引号，分号不能漏） - 如果库不支持
layer()导入（如老版本 Element Plus），就得手动复制其 CSS 内容，粘贴进@layer framework { /* paste here */ } - 多个框架可导入同名层：
@import "tailwind.css" layer(framework);和@import "bootstrap.css" layer(framework);会自动合并 - 某些现代库（如 Chakra UI v2.8+、Bootstrap 5.3+）已原生导出
@layer，但要确认其层名（如@layer chakra）是否与你项目中一致
层内仍受选择器特异性约束，不是进了高层就“免死”
@layer 只控制“哪一层的规则先入场”，不改变层内规则之间的胜负逻辑。同一层里，#header .btn 依然赢过 .btn.primary，哪怕后者在更高层。
- 现象：
@layer overrides { .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 overrides内提升本层选择器权重，例如写成.ant-btn.ant-btn-primary.my-theme，而不是幻想靠层序跳过特异性 -
!important在跨层场景下完全失效，且会绕过层机制，让规则脱离你的分层设计
最容易被忽略的隐性陷阱是：未包裹在任何 @layer 中的样式（包括你在 <style> 标签里随手写的 p { color: red; }）属于「隐式顶层」，优先级高于所有显式层——这个顶层无法命名、无法控制顺序，却真实存在。
