匿名层无法可靠控制第三方样式优先级，因其声明后不可复用、不可重排序，与命名层混用易致覆盖失效；正确做法是全程使用命名层并严格控制声明顺序。
@layer 的匿名层不能用来可靠控制第三方样式优先级——它无法被后续扩展或重排序，和命名层混用反而容易导致覆盖失效。
为什么匿名层 + 命名层组合在第三方场景下容易失效
匿名层（@layer { ... }）一旦声明，就生成一个浏览器内部的唯一临时名称，且无法被再次引用。当你引入第三方 CSS（比如 Tailwind 的 @layer utilities），再写一个匿名层想“盖过它”，结果往往不如预期：
- 匿名层按声明顺序排在最后，但它的优先级仍低于未包裹在
@layer中的普通样式（包括第三方未用@layer包裹的规则） - 第三方库若同时用了命名层和裸样式（如 reset 部分没进
@layer），你的匿名层对那部分完全无效 - 你无法用
@layer utilities显式重声明来合并规则，因为匿名层不支持同名复用
正确做法：只用命名层，并显式声明层序
要稳定接管第三方样式优先级，必须放弃匿名层，全程使用命名层，并主动控制层声明顺序：
- 在项目最顶部的 CSS 文件中，**一次性声明所有层名**，按从低到高排列：
@layer reset, base, components, utilities, overrides; - 确保第三方样式（如
tailwind.css）通过@import url(tailwind.css) layer(utilities);导入，而不是直接<link> - 你自己的定制工具类，必须写在
@layer overrides { ... }里，且该层声明必须在第三方导入之后 - 如果第三方已自带
@layer utilities，你只需再写一次@layer utilities { ... }——同名层内容会自动合并，且你的规则因后出现而生效
常见错误：@import 位置和层名大小写不一致
这两个细节会导致层序错乱或合并失败，非常隐蔽：
立即学习“前端免费学习笔记（深入）”；
-
@import必须放在所有@layer块之前，否则浏览器可能忽略layer(...)参数，退化为普通导入 - 层名严格区分大小写：
@layer Utilities和@layer utilities是两个不同层，不会合并 - Tailwind 默认用小写
utilities，但某些主题插件可能用theme或components，需查其源码确认实际层名
验证是否生效的最快方式
打开 DevTools → Elements 面板 → 找到目标元素 → 在 Styles 标签页里看某条样式旁是否标有 layer(overrides) 或类似字样。如果没有，说明：
- 该样式根本没进任何
@layer - 或你写的
@layer overrides声明位置太靠后（比如在@import之后），被浏览器忽略 - 或层名拼错，导致它进了匿名层或另一个未声明的命名层
真正难处理的不是语法，而是第三方库是否「诚实」地把所有样式都放进 @layer ——很多老版本或自定义构建产物仍混用裸样式，这时你得手动补一层 @layer overrides 并用更强选择器兜底。
