@layer声明必须位于css文件最顶部，仅允许空行和纯注释前置，否则后续所有@layer被浏览器直接忽略；第三方样式默认处于未命名顶层，优先级高于显式声明的层，需用layer()导入或内嵌至指定层。
它不改变单条规则的优先级计算，只决定整组规则的“入场顺序”——搞错这点，@layer 就会失效。
为什么@layer声明必须放在CSS最顶部？
浏览器解析器遇到第一个非 @layer 的语句（哪怕是一行 @import、一个 :root 变量定义、甚至带样式的注释）后，就硬性截断后续所有 @layer 声明。这不是警告，是直接忽略。
- 错误写法：
@import "reset.css"; @layer base;→@layer base被丢弃 - 错误写法：
/* 全局变量 */ :root { --color: #000; } @layer components { }→@layer components不生效 - 正确写法：CSS 文件开头只能有空行、纯注释（不含任何样式内容），然后紧跟
@layer base, components, utilities; - 构建环境需启用 PostCSS 插件（如
postcss-cascade-layers），否则旧环境会直接删除整条@layer语句
第三方样式为什么总压过你的@layer？
直接用 <link rel="stylesheet"> 或 @import "ui-lib.css" 引入的 CSS，默认落在「未命名顶层」，天然高于你所有显式声明的 @layer。
小红书长文-谷歌浏览器
下载
在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。
- 翻车典型：Ant Design 的 CSS 在 HTML 中比你的样式
<link>靠前，结果它反而赢了你后写的@layer custom - 正确做法：
@import "antd.css" layer(framework);（必须是顶层语句，和@layer reset;并列） - 更稳妥方案：把第三方 CSS 内容复制进
@layer framework { /* paste here */ }，彻底规避加载时序和语法限制 - 若第三方库自身含
@layer（如新版 Chakra UI），要检查其层名是否与你冲突；同名层会合并，但顺序由首次声明位置决定
@layer内部还用不用算选择器权重？
必须算。层内规则仍按传统特异性（Specificity）决胜负。@layer 只控制“哪一层先入场”，不是“进了高层就免死”。
- 现象：
@layer custom { .my-btn { color: red; } }没覆盖 Ant Design 的.ant-btn-primary，因为后者特异性是0,0,2,0，而你的只是0,0,1,0 - 验证方法：DevTools → Computed 面板 → 看被划掉规则右侧的 Specificity 值（如
0,0,2,0） - 对策：在
@layer custom内提升本层选择器权重，例如写成.ant-btn.my-theme，而不是幻想靠层序跳过特异性 - 慎用
!important：它会绕过层机制，让规则脱离控制流，破坏整个分层设计意图
真正难的不是写对语法，而是团队能否统一约定哪些样式进哪一层、谁有权修改层声明顺序——一旦分层逻辑散落在多个文件又没人维护，@layer 反而会让调试更混乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
