@layer通过引入层序级联维度而非提升选择器权重来控制覆盖顺序，优先比对层序，再比声明顺序，最后看特异性；!important仅在同层内有效，跨层无效。
为什么@layer能绕过选择器权重直接控制覆盖顺序
因为@layer不是在“调高某条规则的权重”，而是给整组规则分配一个更高阶的级联维度。浏览器计算样式时，优先比对层顺序，再比层内声明顺序，最后才看选择器特异性（0,1,0 vs 1,0,0）。这意味着哪怕第三方库用了#modal .close-btn { color: white !important; }，只要你把它归入@layer vendor;，而你在@layer overrides;里写.close-btn { color: black; }，后者就会生效——!important只在同层内有效，跨层不越界。
@layer声明顺序必须前置，且不能动态插入
声明层名的语句（如@layer reset, base, components, utilities;）必须出现在任何带@layer layer-name { ... }块之前，且只能在CSS顶层作用域写，不能嵌套在@media或@supports里。否则浏览器会忽略后续所有该层的规则，DevTools里也看不到对应层标识。
- ✅ 正确：先集中声明所有层名，再分块填充内容
- ❌ 错误：在
@layer components { ... }之后再补一句@layer theme;——后声明的theme层不会自动插入到已有层序列中，它会被当作独立隐式层处理，优先级不可控 - ⚠️ 注意：
@import引入的CSS文件里若含@layer，其声明顺序按@import位置算，不是按文件加载时间
第三方组件库样式怎么安全“降权”进指定层
很多UI库（如Element Plus、Ant Design）本身不支持@layer，但你可以用@layer vendor { @import "xxx.css"; }把整份样式包强制塞进vendor层，再通过层序确保它排在你自定义层之前。这样既不用改库源码，又避免了手动重写选择器去对抗高权重规则。
- 必须用
@layer vendor { @import "node_modules/xxx/dist/index.css"; }，不能把@import写在外面再套@layer - 如果库用了CSS in JS或style标签注入，就得靠构建工具（如Vite插件）在打包时做AST重写，把它的全局规则包裹进
@layer vendor - 某些库（如Bootstrap 5.3+）已原生支持
@layer导出，可直接用@layer bootstrap { @import "bootstrap/scss/bootstrap.scss"; }
响应式断点和状态类容易踩的层内顺序陷阱
媒体查询和伪类规则本身不改变层优先级，但它们在层内的书写顺序会影响最终结果。比如你在@layer responsive里先写@media (min-width: 768px) { .btn { display: flex; } }，再写.btn:hover { opacity: 0.8; }，那么悬停态永远在响应式规则之后计算——但如果把:hover写在@media块内部，它就只对该断点生效，跨断点行为可能断裂。
- 推荐做法：基础状态（
:hover、:focus）放@layer states，与@layer responsive并列，靠层序保证状态覆盖响应式 - 不要在
@layer base里混写@media和普通规则——一旦需要覆盖某个断点下的样式，你就得在更高层重复整个@media块，维护成本陡增 -
@layer不解决单层内规则冲突，只是把“战场”从全局挪到层内；层内仍要遵守原有级联规则
真正难的是层粒度设计：层太少压不住冲突，层太多又让开发者记不住哪条规则该进哪一层。实际项目里，base、vendor、components、states、overrides这五层已经能覆盖90%场景，再多反而增加认知负担。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
