第三方CSS默认进入未命名顶层，优先级高于所有命名层；正确导入需用@import url() layer(name)且置于CSS顶部，声明顺序决定层优先级，构建工具需启用postcss-cascade-layers插件。
第三方 CSS 默认不进任何 @layer，会压过你所有命名层
直接 <link href="bootstrap.css"> 或裸 @import "antd.css"; 引入的样式，浏览器会把它们放进「未命名顶层」——这个隐式层优先级天然高于你写的 @layer components;、@layer overrides; 等所有命名层。这不是 bug，是规范行为。DevTools 的 Styles 面板里，被划掉的规则右侧若没有 layer(components) 这类标识，说明它根本没进你的层。
常见翻车点：<link> 标签写在 HTML 里比你的主样式靠前，结果 Bootstrap 的 .btn 直接赢了你后写的 @layer overrides { .btn }；或者写了 @layer framework { @import "xxx.css"; }，但这种嵌套写法非法，整条语句被浏览器忽略。
必须用顶层 @import url() + layer() 参数导入
正确方式只有一种：在你的主 CSS 文件最顶部（前面不能有空行、注释、@charset 除外），用带引号的 URL 和 layer() 参数显式导入：
@import url("bootstrap.css") layer(framework);注意以下几点：
立即学习“前端免费学习笔记（深入）”；
-
url()内的路径是相对于当前 CSS 文件，不是 HTML 页面 -
layer()括号里只能填你已声明过的层名，不能加引号或逗号，比如layer("framework")是错的 - 该语句必须是整个文件第一条有效语句；前面若有
@charset "UTF-8";，它必须是第一行，@import紧随其后为第二行 - 如果第三方库本身不支持
layer()（如老版本 Element Plus），就得手动复制其 CSS 内容，粘贴进@layer framework { /* paste here */ }
@layer 声明顺序写错，整套机制静默失效
层优先级只由 @layer name; 的声明顺序决定，不是规则出现顺序。下面这段代码会导致预期完全失效：
@layer components;<br>@layer overrides;<br>@layer components { .btn { padding: 4px; } }<br>@layer base { .btn { padding: 8px; } }结果是 .btn 取 4px，因为 @layer components; 声明在 @layer base; 之前，层级更低；即使它的规则写在后面，也改变不了层序。更隐蔽的问题：
- 只写
@layer utils { }却没在顶部显式声明@layer utils;→ 该规则降级为“未命名层”，失去层控权 - 多个文件都声明
@layer theme;→ 它们会自动合并，但规则插入顺序仍按文件加载顺序，不是声明顺序 - Vite/webpack 项目中未启用
postcss-cascade-layers插件 → 旧版 PostCSS 会直接删掉整条@layer语句，不报错也不警告
媒体查询、!important 和选择器特异性仍在层内起作用
@layer 只控制“哪一层的规则能参与本轮计算”，不豁免层内规则的胜负逻辑。这意味着：
- 单独写的
@media (min-width: 768px) { .card { display: grid; } }不属于任何层，仍落在未命名顶层，可能意外覆盖你@layer overrides里的响应式规则 - 同一层里，
#header .btn（特异性0,1,1,0）依然赢过.btn.custom（0,0,2,0）；跨层时，@layer overrides { .btn }能压过@layer framework { .ant-btn }，但压不过@layer framework { #modal .ant-btn } - 别在
@layer里继续加!important—— 它破坏分层意图，且无法提升跨层能力；!important只在同层内生效，跨层无效
真正容易被忽略的是：层结构一旦破损（比如声明位置错、构建插件未启用、第三方未收编），@layer 就彻底静默退场，你看到的仍是传统层叠结果——而 DevTools 很少主动提示这点。
