@layer 是 css 用于解决样式覆盖混乱的分层机制，通过声明命名层（如 @layer base、components）按顺序控制优先级，避免 !important 和权重战，同层内仍遵循常规层叠规则。
什么是 @layer，它解决什么问题
CSS @layer 是为了解决样式覆盖混乱而生的——当你引入多个第三方组件库、自定义主题、重置样式（如 reset.css）时，!important 和选择器权重战会失控。@layer 不是新选择器，而是给 CSS 规则“分组+排序”，让浏览器按层声明顺序决定优先级，而不是只看选择器权重或书写顺序。
怎么声明和嵌套 @layer
声明必须在样式表最外层（不能套在 @media 或选择器内部），支持命名和匿名两种写法：
@layer base {
* { margin: 0; }
}
@layer components {
.btn { padding: 8px 16px; }
}
@layer utilities {
.text-center { text-align: center; }
}
层按声明顺序从低到高叠加（base 最底层，utilities 最顶层），同层内规则仍按常规层叠规则（源码顺序、选择器权重）生效。匿名层可用来临时分组，但无法被后续引用或重排序：
@layer {
body { font-size: 16px; }
}
- 层名区分大小写，
@layer Base和@layer base是不同层 - 同一层可在多处声明，内容自动合并（类似
@import合并行为） - 不能在
@layer内再嵌套@layer（语法报错）
如何用 @layer 控制第三方样式优先级
这是最常见也最容易出错的场景：你引入了 Tailwind 的 @layer utilities，又写了自定义工具类，但发现你的样式被覆盖了——因为 Tailwind 的层声明在你之前，它的 utilities 层天然更低。
解决办法是**显式声明同名层，并确保你的声明在第三方之后**：
<!-- 在 HTML 中，把你的样式 link 放在 tailwind.css 之后 --> <link rel="stylesheet" href="tailwind.css"><link rel="stylesheet" href="my-utilities.css">
在 my-utilities.css 中：
@layer utilities {
.text-primary { color: #3b82f6; }
}
- 浏览器按
@layer声明顺序确定层优先级，不是按文件加载顺序 - 所以即使你在 HTML 中后加载文件，也要确保该文件里
@layer utilities的声明出现在 Tailwind 的同名层声明之后（通常需检查源码或使用构建工具控制注入顺序） - 若用 PostCSS 或 Vite，可通过插件（如
postcss-import）提前解析并合并层，避免手动调序
@layer 和 @import、!important 的关系
@layer 不替代 @import，但能和它共存：@import 仍用于加载外部文件，而 @layer 只负责对已加载的规则分层。两者结合时注意：@import 的样式若含 @layer，其层声明会被纳入当前上下文；但若 @import 文件没用 @layer，它所有规则都属于“未命名层”，优先级低于任何已命名层。
!important 在层内依然有效，但它只影响层内规则竞争，不跨层提升优先级。比如：
@layer base {
h1 { color: red !important; }
}
@layer components {
h1 { color: blue; } /* 这行永远赢不了上面那行，因为 base 层整体低于 components 层 */
}
- 一旦用了
@layer，就别依赖!important破坏层秩序——它只会让你更难调试 -
@import带layer()参数（如@import "foo.css" layer(components);）是实验性语法，目前仅 Chromium 119+ 支持，不要在生产环境依赖 - 层声明本身不产生样式，只是容器；空层（
@layer foo;）合法，但无实际作用
真正麻烦的是层名拼写错误、跨文件声明顺序失控，以及构建工具对 @layer 解析不一致——这些不会报错，但会让样式静默失效。上线前务必用 DevTools 的 Styles 面板确认层是否按预期分组和排序。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
