@layer是css原生层叠管理机制，用于显式声明样式层并按声明顺序定义层间优先级，后声明的层覆盖前层同名规则，层内仍遵循传统权重规则。
什么是 @layer？它不是覆盖规则，而是定义层叠顺序的“容器”
@layer 的核心作用是显式声明样式层（layer），让浏览器按声明顺序决定层间优先级，而不是靠引入顺序或选择器权重硬拼。它不改变单个规则的 specificity，但能绕过“后引入 > 先引入”的默认行为——尤其当多个 CSS 文件（比如框架、组件库、自定义样式）混用时，@layer 才真正有用。
常见错误是以为写 @layer base { .btn { color: red } } 就能压过外部库样式——其实不行，除非那个库也用了 @layer，且你声明的层在它之后。
- 必须所有参与排序的样式都用
@layer才生效；纯普通 CSS 仍走传统层叠逻辑 - 层名本身无语义，顺序才关键：后声明的层优先级更高（哪怕它在文件开头）
- 可以嵌套命名层，如
@layer framework.base，但解析时只看顶层名称（framework）
如何让第三方库样式服从你的定制层？
很多 UI 库（如 Tailwind、Bootstrap 5.3+）已内置 @layer 支持。以 Tailwind 为例，它默认导出 @layer base、@layer components、@layer utilities。你要覆盖它的 .btn，就得把自定义样式放进同名层，且确保你的 CSS 在 Tailwind 之后加载：
@layer components {
.btn {
background-color: #3b82f6;
}
}
如果库没用 @layer（比如老版本 Bootstrap 或手写的第三方 CSS），你就没法用 @layer 控制它——只能靠提高 specificity（加 !important 是下策）或调整 HTML 中的 <link> 加载顺序。
- 检查目标库源码是否含
@layer声明；没有就别强求 - 层名必须完全一致（大小写敏感），
@layer Components和@layer components是不同层 - 未命名的层（
@layer { ... }）会归入匿名层，优先级最低，且无法被引用
@import 和 @layer 混用时的坑
@import 会阻塞渲染，且其内部的 @layer 声明可能被外部层“包裹”，导致预期外的优先级。例如：
@layer framework {
@import "tailwind.css";
}
这样写无效：@import 必须在 @layer 外部，且不能被任何规则包裹。正确做法是先声明层，再导入：
@layer framework;
@import "tailwind.css";
<p>@layer components {
.btn { /<em> 自定义样式 </em>/ }
}</p>
-
@import必须出现在样式表最顶部（除@charset外），否则会被忽略 - 导入文件内部若含
@layer，它和外部同名层自动合并，但顺序以首次声明为准 - Vite / Webpack 等构建工具对
@import的处理可能绕过原生逻辑，建议改用 JS import 或 PostCSS 插件
调试层叠顺序：浏览器 DevTools 能看到什么？
Chrome 119+、Firefox 117+ 在 Elements 面板的 Styles 侧边栏中，会为每个规则标注所属层（如 layer: components）。但注意：
- 未使用
@layer的规则显示为layer: none，它们永远低于任何命名层 - 同层内规则仍按传统规则排序（source order + specificity）
- 如果某条样式被标记为
invalid却没报错，很可能是层名拼写错误或@layer位置非法
真正容易被忽略的是：层声明本身不生成任何样式，只建模优先级关系。写一百遍 @layer theme; 不如一次正确声明 + 后续规则落在其中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
