@layer 无法覆盖未收编的第三方 CSS，因其默认落入隐式顶层；必须用 @import url("x.css") layer(name) 在文件首行显式收编，且所有样式须包裹在 @layer 块中。
@layer 能管理引入样式的优先级，但必须显式收编第三方 CSS 到命名层，否则它默认落在隐式顶层，天然压过你所有 @layer 声明。
第三方样式不进层就永远赢你
直接用 或 @import "bootstrap.css"; 引入的样式，浏览器不会把它放进任何 @layer，而是归入「未命名顶层」——这个隐式层优先级高于你写的 @layer base、@layer components 等所有命名层。
- DevTools 的 Styles 面板里，被划掉的规则右侧若没有
layer(components)这类标识，说明它根本没进你的层 - 哪怕你写了
@layer overrides { .btn { color: red; } }，只要 Ant Design 是裸导入，它的.ant-btn仍会生效 - 验证方式：打开 Computed 面板，看同元素上被覆盖的规则，其 Layer 列是否为空
@import layer() 必须写在 CSS 文件最顶部
@import url("antd.css") layer(framework); 是唯一合法的收编方式，但它有严苛位置要求：
- 必须是 CSS 文件（或
标签）的第一条语句，前面不能有空行、注释、@charset以外的任何内容 - URL 必须带引号，语句必须以分号结尾；漏掉任一字符，后续所有
@layer都会被静默忽略 -
@layer framework { @import "antd.css"; }是非法语法，整块会被浏览器跳过 - 构建工具（如 Vite）需启用
postcss-cascade-layers插件，否则旧版 PostCSS 会直接删掉整条语句
层声明顺序决定覆盖能力
你自己的覆盖规则要生效，必须满足两个条件：写在更高层 + 包裹在 @layer 块内。
- 层名声明语句必须前置：
@layer reset, base, framework, overrides;——overrides必须排在framework之后 - 覆盖代码必须是：
@layer overrides { .ant-btn { background: #3b82f6; } }，不能写裸规则.ant-btn { }（否则掉回隐式顶层） - 层内仍受选择器特异性约束：
@layer overrides { #modal .ant-btn }能赢@layer framework { .ant-btn }，但@layer overrides { .ant-btn }不一定赢@layer framework { .ant-btn.ant-primary }（后者特异性更高）
未分层样式是隐形天花板
最容易被忽略的陷阱：任何没包裹在 @layer 块里的样式，都属于「未命名顶层」，优先级最高。
- 比如你在同一个
标签里写了p { color: red; }，又写了@layer base { p { color: blue; } }，最终生效的是红色 - 这个隐式顶层无法命名、无法控制顺序，也无法被
@layer覆盖 - 所以整个项目必须从第一行开始就只用
@layer声明和块，中间不能混入裸规则
真正起效的关键不在“写了多少层”，而在于是否把所有参与排序的样式都显式归属到命名层，并且让层声明在解析器眼里“干净得无可挑剔”。一个空格、一行注释、一次错误的 @import 嵌套，都会让整套机制退回到传统层叠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
