@layer 能解决样式优先级冲突，但要求所有样式显式归属命名层且层名声明必须位于 css 文件最顶部；第三方样式默认落入未命名顶层，优先级高于命名层，需用 layer() 导入或手动收编。
直接说结论：@layer 能解决引入样式的优先级冲突，但前提是所有参与排序的样式都显式归属到命名层，且层名声明必须放在整个 CSS 文件最顶部——漏掉任一条件，它就静默失效，你看到的仍是传统层叠结果。
为什么第三方样式总压过你的自定义规则
因为没被 @layer 收编的引入样式（比如直接 @import "antd.css" 或 <link href="bootstrap.css">）默认落入「未命名顶层」，浏览器规定它的优先级高于所有显式声明的命名层。这不是 bug，是规范行为。
- DevTools 的 Styles 面板里，被划掉的规则若右侧没有
layer: components这类标识，说明它根本没进层 - 哪怕你写了
@layer overrides { .btn { color: red; } }，只要 Ant Design 的 CSS 是裸导入，它就天然赢 - 检查方式：打开 Computed 面板，看同元素上被覆盖的规则，其 Layer 列是否为空
怎样把第三方 CSS 安全塞进指定层
不能用 @layer vendor { @import "xxx.css"; } —— 这种写法非法，@import 不能嵌套在 @layer 块内。正确做法只有两种：
- 用
@import url("xxx.css") layer(vendor);（注意是顶层语句，且 URL 必须带引号） - 如果库不支持
layer()导入（如老版本 Element Plus），就得手动复制其 CSS 内容，粘贴进@layer vendor { /* paste here */ } - 某些现代库（如 Tailwind v3.4+、Bootstrap 5.3+）已原生导出
@layer，但必须确认其层名是否与你项目中一致，@layer components和@layer Components是不同层
@layer 声明顺序错位会导致完全失效
@layer reset, base, vendor, overrides; 这类层名声明语句，必须出现在整个 CSS 文件或 <style></style> 标签的第一行，前面不能有任何其他内容——包括注释、空行、@charset（@charset 是唯一例外，但必须是第一行）、@import、普通选择器，甚至一个空格都不行。
- 常见错误：把
@layer base;写在 reset.css 文件中间，或夹在两个组件样式块之间 - Vite/webpack 构建后发现层名消失？大概率是 PostCSS 插件未启用
postcss-cascade-layers，旧版会直接删掉整条@layer语句，还不报错 - 一旦解析器遇到第一个非
@layer语句，后续所有@layer规则都会被忽略，DevTools 里也看不到层标识
响应式媒体查询必须和样式写在同一层内
单独写的 @media (min-width: 768px) { .card { padding: 2rem; } } 不属于任何层，仍落在未命名顶层，照样压垮你 @layer responsive 里的普通规则。
- 正确写法：
@layer responsive { @media (min-width: 768px) { .card { padding: 2rem; } } } - 层序决定胜负：只要
@layer responsive声明在@layer components之后，它内部的媒体查询就会覆盖 components 层里所有同选择器的规则，无论后者选择器多复杂 - 不要在
@layer responsive里混写基础样式（比如无媒体查询的.card { border: 1px solid #ccc; }），否则污染层意图，破坏可维护性
最容易被忽略的点是：层名声明位置和第三方样式是否真正进层。这两处一错，@layer 就退化成普通 CSS，你还以为它在工作。调试时先盯死 DevTools 的 Layer 列，再查源码里 @layer 声明是不是真在最顶上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
