@layer 能压制第三方库的 !important 是因为层叠计算新增了层顺序维度，优先于选择器权重和 !important；第三方 CSS 无 @layer 需手动包裹进指定层，声明顺序决定层优先级，配合 @scope 可解决局部作用域污染。
直接用 @layer 声明层级顺序，就能让自定义样式稳稳压过第三方库的 !important 规则——前提是第三方样式被正确“套进层里”，否则它还是按老规则走。
为什么 @layer 能压制第三方库的 !important
因为浏览器级联计算顺序变了：先比层顺序 → 层内再比规则顺序 → 最后才看选择器权重和 !important。哪怕第三方写了 button { color: red !important; }，只要你把它放进 @layer plugin;，而你的修复样式写在更靠后的 @layer overrides; 里，它就会自然生效，完全不用加 !important 或拼选择器长度。
关键点在于：@layer 不是另一个“权重加成”，而是新增的、更高优先级的层叠维度。
第三方 CSS 没用 @layer 怎么办？必须手动包裹
绝大多数插件（如 Flatpickr、Tinymce、Chart.js 的默认主题）输出的 CSS 是裸规则，不带任何 @layer。这时候不能指望它自动归层，得主动“收编”：
- 用 JS 在插件样式加载完成后，取其
内容，用正则提取所有顶层规则（跳过@import、@media），再用@layer plugin { ... }包裹后重写入 DOM - 更稳妥的做法是拦截
请求，用fetch()拿到原始 CSS 字符串，手动包裹，再通过URL.createObjectURL(new Blob([css], {type: 'text/css'}))创建 blob URL 替换原href - 如果插件支持主题入口（如 Ant Design 的
theme.less），就在其顶层第一行加@layer plugin;，确保编译后整个输出被包裹
声明顺序写错会导致层失效
层优先级只由 @layer name; 的声明顺序决定，不是规则出现顺序。下面这段代码会导致预期失效：
@layer components;
@layer overrides;
@layer components {
.btn { padding: 4px; }
}
@layer base {
.btn { padding: 8px; }
}
结果是 .btn 取 4px，因为 @layer components; 声明在 @layer base; 之前，层级更低；即使它的规则写在后面，也改变不了层序。
常见错误包括：
- 只写
@layer utils { }却没在顶部显式声明@layer utils;→ 该规则降级为“未命名层”，失去层控权 - 多个文件都声明
@layer theme;→ 它们会自动合并，但规则插入顺序仍按文件加载顺序，不是声明顺序 - 用
@import加载含@layer的 CSS 时，@import语句本身不触发层声明 → 必须确保被导入文件顶部已有@layer xxx;
和 @scope 配合才能解决局部泄漏
@layer 解决的是全局层序问题，但它管不了作用域污染。比如一个插件的 .modal 类意外影响了你自己的弹窗组件，仅靠分层无法隔离。
这时需要 @scope（Chrome 125+ 支持）配合：
- 把插件样式包进
@scope (.plugin-root) { @layer plugin { ... } } - 确保插件容器有固定 class，且你的组件不共享该 class
- 注意：目前
@scope还不支持跨 shadow DOM，也不被 Safari / Firefox 支持，生产环境需谨慎
真正难的从来不是语法，而是判断哪些样式该归哪一层、哪些第三方必须包裹、哪些冲突其实该用 @scope 切开——这些决策没法靠工具自动完成，得一行行读源码、看 DevTools 的 computed 样式来源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
