第三方样式未进@layer会落入隐式顶层，优先级高于显式层；@import需用layer()语法并置于文件最顶部，且@layer声明前不能有非@layer语句；同名层自动合并但顺序由首次声明决定；层内仍需遵循选择器权重规则。
第三方样式不进@layer就自动赢你
所有没被显式收编进@layer的 CSS（包括直接<link>引入的 UI 库、@import未带layer()的文件、甚至你文件开头多写了一行:root变量）都会落入「隐式顶层」，优先级高于你写的任何显式层。这不是 bug，是规范行为。
- 翻车现场：
@import "antd.css"放在你@layer custom { }前面，结果 Ant Design 样式照样压过你的定制 - 正确做法：必须用
@import "antd.css" layer(framework);，且这条语句得和@layer reset, framework, custom;并列在 CSS 文件最顶部 - 构建工具里如果用了 PostCSS，确认已启用
postcss-cascade-layers插件，否则整条@layer声明会被静默丢弃
@layer声明位置错一个字符就失效
@layer规则必须出现在 CSS 文件最开头——允许空行和纯注释（如/* reset layer */），但一旦出现第一个非@layer语句（哪怕只是@charset "UTF-8";或@import），后续所有@layer声明立刻被浏览器忽略。
- 错误示例：
@import "reset.css"; @layer base;→@layer base完全不生效 - 错误示例：
:root { --primary: #3b82f6; } @layer components { }→@layer components被截断 - 安全写法：文件开头只放
@layer reset, framework, base, components, utilities;，后面再跟其他规则
同名层自动合并，但顺序由首次声明决定
多个@layer components { }块会自动合并到同一层，但它们的叠加顺序取决于源码中第一次出现@layer components的位置，不是按你在 HTML 里<link>加载的顺序。
- 比如 Tailwind 自带
@layer components，你项目里也写@layer components { .btn { ... } }，最终谁生效取决于哪个@layer components在源码里先出现 - 想确保业务样式赢过框架？把你的
@layer components声明写在 Tailwind 的 CSS 内容之前（通过@import或构建时前置） - 层名大小写敏感：
@layer Components和@layer components是两个独立层，不会合并
进了高层≠能绕过选择器权重
@layer只解决“哪一层的规则参与比拼”，不改变层内规则之间的胜负逻辑。同一层里，#header .btn依然赢过.btn.custom，哪怕后者在更高层。
- 现象：你写了
@layer custom { .my-btn { color: red; } }，却没覆盖 Ant Design 的.ant-btn-primary - 原因：前者 specificity 是
0,0,1,0，后者是0,0,2,0（类名+伪类），权重更高 - 对策：在
@layer custom里提升本层选择器权重，例如写成.ant-btn.my-theme，而不是依赖层序“跳过”权重计算 - 慎用
!important：它会让规则脱离层机制，破坏整个分层设计意图
真正卡住多数人的不是语法，而是第三方库是否主动支持@layer——不支持的就得手动收编，支持的还得核对层名是否一致、首次声明位置是否可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
