@layer声明必须置于css文件最顶部，前面仅允许纯空行或无样式逻辑的注释；第三方css需显式收编进命名层；@layer仅控制层间顺序，不改变选择器特异性。
@layer 声明必须放在 CSS 文件最顶部
只要前面有任何非 @layer 的内容（包括注释、@import、:root、空行甚至 BOM 字符），整条声明就会被浏览器静默忽略，DevTools 里完全看不到层标识。这不是警告，是硬性截断。
常见错误写法：
-
@import "reset.css"; @layer base, components;→@layer失效 -
/* 全局变量 */ :root { --color: #000; } @layer components { }→ 层块不注册 -
@layer base; @tailwind base;中间夹了其他语句 → 后续所有@layer都被跳过
正确姿势：CSS 文件开头只允许纯空行或不含样式逻辑的注释，紧接着就是完整的层名声明，例如：@layer reset, base, components, utilities;
第三方 CSS 必须显式收编进命名层
直接 <link href="antd.css"> 或 @import "antd.css"; 引入的样式，默认落在「未命名顶层」，优先级天然高于你所有 @layer 命名层。这不是 bug，是 CSS 规范行为。
两种安全收编方式：
- 用
@import url("antd.css") layer(framework);—— 注意这是顶层语句，不能嵌套在@layer framework { }内部 - 手动复制其 CSS 内容，粘贴进
@layer framework { /* paste here */ }块中（适合不支持layer()导入的老库）
验证是否成功：打开 DevTools → Computed 面板 → 看被覆盖的规则右侧是否有 layer: framework 标识；若为空，说明没进层。
@layer 只控制层间顺序，不绕过选择器特异性
写了 @layer custom { .btn { color: red; } }，却压不住 @layer framework { #modal .ant-btn { color: blue; } }，不是层没生效，而是后者的特异性（0,1,1,0）本就高于前者（0,0,1,0）。
同一层内，规则胜负仍由传统选择器权重决定：
-
#header .btn（0,1,1,0）赢过.btn.primary（0,0,2,0） -
.ant-btn.ant-btn-primary.my-theme比单纯.my-theme更可能覆盖第三方高权值规则 - 响应式媒体查询必须和样式写在同一层内，单独写的
@media会掉出所有层，回到未命名顶层
别幻想靠层序跳过特异性计算——该加 ID 或复合类时，就得加。
构建工具需启用 postcss-cascade-layers 插件
Vite / webpack 默认不识别 @layer，旧版 PostCSS 会直接删掉整条语句且不报错，导致你在源码里写了十层，最终生成的 CSS 里一条都没有。
确认方式：
- 检查构建配置中是否已安装并启用了
postcss-cascade-layers - 查看输出 CSS 文件开头是否存在
@layer reset, base, components, utilities; - 若用 Tailwind v4，它已默认启用真实层叠层，但仍要求你在自定义 CSS 中显式声明层名，否则
@layer components { }不会被识别
最容易被忽略的是：层名声明顺序本身决定了优先级，@layer a, b; 表示 b 层优先级高于 a；而你手写的裸 CSS（如 .title { color: #1e40af; }）默认不属于任何层，会被 @layer utilities 压制——除非你把它也放进某个 @layer 块里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
