@layer 是显式声明层叠顺序的机制，按声明先后决定优先级，后层规则高于先层且无视 !important；必须顶层声明、不可嵌套；可用 layer() 包装第三方库；devtools 的 origin 栏可验证生效。
什么是 @layer 声明顺序决定样式优先级
@layer 不是选择器，也不是作用域开关，它是一个**显式声明层叠顺序的机制**。浏览器会按 @layer 出现的先后顺序（而非 CSS 文件加载顺序或选择器权重）来决定层间覆盖关系：后声明的 @layer 中的规则，天然高于先声明的层，哪怕后者用了 !important 也无效。
这意味着你不再需要靠增加类名数量、加 id、插 style 标签甚至内联 !important 来“赢”权重战——只要把业务组件样式放进靠后的 @layer，它就自动压过基础重置层或框架默认层。
@layer 必须在样式表顶层声明，且不能嵌套
常见错误是把它写在媒体查询里、写在 @keyframes 下、或者包裹在某个 class 选择器内部。这些写法都会被浏览器忽略，@layer 规则直接失效，退化为普通 CSS。
正确做法只有一条：所有 @layer 必须出现在 CSS 文件最外层，且彼此之间用分号或换行隔开：
@layer reset; @layer base; @layer components; @layer utilities;
之后才能在任意位置用 @layer components { ... } 注入样式。注意：@layer components { } 和 @layer components { .btn { color: red; } } 是等价的，但后者更常见；而 @layer components { @media (min-width: 768px) { ... } } 是合法的——媒体查询可以放在层内，但 @layer 本身不能被任何块包裹。
第三方库样式怎么塞进 @layer？用 import + layer() 函数
像 Tailwind、Bootstrap 这类不支持原生 @layer 的库，无法直接修改源码。此时要用 @import 的 layer() 函数包装：
以下写法会让 Bootstrap 的所有规则进入 base 层，从而确保它低于你后续定义的 components 层：
@import "bootstrap/dist/css/bootstrap.css" layer(base);
注意几点：
- 路径必须是有效可解析的 URL 或相对路径（Webpack/Vite 需确认别名是否生效）
-
layer()括号里只能填一个已声明过的层名，比如layer(reset)，不能写layer("reset")或layer(reset, base) - 如果库本身已含
@layer（如较新版本 Tailwind），layer()包装会报错，此时应改用@layer tailwind { @import "..."; }手动包裹
调试时怎么看 layer 是否生效？查 computed 样式里的 “Origin” 栏
Chrome DevTools 的 Elements → Styles 面板中，每条样式规则下方会出现 “Origin” 字段。如果看到类似 layer(components) / user agent stylesheet 的标识，说明该规则确实归属指定层；若只显示 user stylesheet 或 inline，那大概率是 @layer 声明位置错了，或被语法错误中断了。
另一个信号是：当两个同名规则分别来自不同 @layer，高优先级层的规则左侧会出现蓝色小点（表示它胜出），低层的则被划掉——这比数选择器权重直观得多。
真正容易被忽略的是：一旦启用 @layer，整个样式表的层叠逻辑就从“单维权重计算”切换成“二维结构控制”，你得同时管理好层声明顺序 + 层内规则书写顺序。漏掉任一环节，都可能让某块样式突然“失重”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
