@layer 不能彻底解决覆盖问题，仅控制层间优先级；生效需第三方样式显式归属某层、自定义层声明靠后且选择器特异性足够高。
@layer 本身不能“彻底解决”覆盖难题，它只提供层序控制权——真正生效的前提是：所有第三方样式必须显式归属到某一层，且你的自定义层声明顺序靠后、选择器特异性合理。
为什么写了 @layer custom 还是盖不住 Ant Design 的 .ant-btn？
因为 @layer 只管“层间”优先级，不管“层内”胜负。Ant Design 的 .ant-btn.ant-btn-primary 特异性是 0,0,2,0，而你写 .my-button（0,0,1,0）哪怕放在 @layer custom 里也输。
- 打开 DevTools → Computed 面板 → 看被划掉规则右侧的
Specificity值（如0,0,2,0） - 不要幻想靠层跳过特异性：得同步升级选择器，比如
@layer custom { .ant-btn.my-theme { ... } } -
!important在跨层时会失效，且破坏层设计意图，别用
第三方 CSS 怎么塞进 @layer？layer() 函数不是万能的
像 Bootstrap、Tailwind 这类不自带 @layer 的库，必须用 @import url("...") layer(base); 包裹，但有硬性限制：
- 路径必须可解析（Vite/webpack 别名要生效，CDN 地址必须带
https://） -
layer()括号里只能填一个已声明过的层名，比如layer(reset)，不能写layer("reset")或layer(reset, base) - 如果库本身已含
@layer utilities，再套layer()会报错，此时应改用@layer utilities { @import "..."; }手动包裹 - 构建工具若没启用
postcss-cascade-layers插件，旧版 PostCSS 会直接删掉整条@import ... layer(...)语句，连警告都不给
@layer 声明位置错一毫，整个机制就失效
浏览器解析 CSS 时，遇到第一个非 @layer 规则（比如 * { margin: 0; } 或 .btn { color: red; }）后，后续所有 @layer 声明都会被忽略——DevTools 的 Styles 面板里根本不会显示层名，Computed 面板也查不到来源。
- 所有层名声明（如
@layer reset, base, components;）必须放在整个 CSS 文件或<style></style>标签的最顶部，前面不能有任何其他 CSS 规则 - 多个文件中重复声明同一层（如都写
@layer theme;），内容会自动合并，但规则插入顺序仍按文件加载顺序，不是声明顺序 - 用
@import加载含@layer的 CSS 时，导入语句本身不触发层声明，需确保被导入文件顶部已有@layer xxx;
别用匿名层 @layer { } 处理第三方样式
匿名层无法复用、不可重排序，和命名层混用极易导致覆盖失效。第三方库若同时用了命名层和裸样式（比如 reset 部分没进 @layer），你的匿名层对那部分完全无效。
- 正确做法：在项目最顶部一次性声明所有层名，按从低到高排列：
@layer reset, base, components, utilities, overrides; - 第三方样式必须通过
@import url(...) layer(...)显式注入，或手动复制内容进对应@layer xxx { }块 - 若第三方库已原生导出
@layer chakra，你只需再写一次@layer chakra { }——同名层内容自动合并，且你的规则因后出现而生效
最容易被忽略的点：层序只是第一道防线，选择器特异性仍是第二道关卡。你把样式放进 @layer overrides，不代表就能无条件赢；它只保证你有机会赢，赢不赢还得看选择器写得够不够“重”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
