CSS媒体查询优先级由选择器特异性和声明顺序决定，而非@media本身；@layer仅控制层间顺序，不改变层内规则权重，响应式样式须显式归属命名层且置于CSS顶部。
@layer 本身不提升媒体查询优先级，它只让响应式规则和其他样式在可预测的层序里排队——关键在声明顺序和归属位置，不在@media本身。
响应式规则必须写进命名层内部，不能只套@media
单独写 @media (min-width: 768px) { .card { padding: 2rem; } } 这行代码不会自动进入任何层，它落在「未命名顶层」，和第三方 CSS 同级，极易被覆盖。
- 错误写法：
@media (min-width: 768px) { .card { padding: 2rem; } }（没层，不可控） - 正确写法：
@layer responsive { @media (min-width: 768px) { .card { padding: 2rem; } } }（显式归属） - 更安全做法：把所有断点统一收进一个
@layer responsive块，避免分散在多个文件里漏声明
@layer 声明必须放在CSS最顶部，否则整条失效
浏览器解析器遇到第一个非 @layer 的语句（哪怕是一行 @import、一个 :root 变量、甚至带样式的注释），就会丢弃后续所有 @layer 声明。
- 错误示例：
@import "reset.css"; @layer base, responsive;→@layer被忽略 - 错误示例：
/* 全局变量 */ :root { --color: #000; } @layer responsive { ... }→@layer responsive不生效 - 正确结构：CSS 文件开头只能是空行、纯注释（不含任何样式内容）、然后紧跟
@layer reset, base, components, responsive; - 构建工具（Vite/webpack）需启用
postcss-cascade-layers插件，否则旧版 PostCSS 会直接删掉整条@layer语句
第三方样式默认压过你的响应式层，必须显式收编
直接用 <link rel="stylesheet"> 或 @import "antd.css" 引入的样式，默认落入「未命名顶层」，优先级天然高于你所有命名层。这不是 bug，是规范行为。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
@layer framework { @import "antd.css"; }→ 语法非法，整个块被忽略 - 正确写法：
@import "antd.css" layer(framework);（注意是顶层语句，和@layer reset;并列） - 兼容方案：若库不支持
layer()（如老版 Element Plus），就复制其 CSS 内容，粘贴进@layer framework { /* paste here */ } - 验证是否生效：DevTools → Computed 面板 → 查看被划掉规则右侧是否有
layer: responsive标识；若为空，说明没进层
层内仍要认真算选择器权重，别指望“进高层就赢”
@layer 只控制层间顺序，不豁免层内特异性。你在 @layer responsive 里写的 .btn，依然打不过同层或更高层里的 .ant-btn-primary（特异性 0,0,2,0 vs 0,0,1,0）。
- 现象：
@layer responsive { @media (min-width: 768px) { .btn { padding: 1.5rem; } } }没覆盖 Ant Design 的按钮内边距 - 原因：Ant Design 实际用了
.ant-btn.ant-btn-primary，而你的选择器太弱 - 对策：在响应式层内同步升级选择器，比如写成
@layer responsive { @media (min-width: 768px) { .ant-btn.my-theme { padding: 1.5rem; } } } - 禁用
!important：它跨层失效，且会污染层意图；真正难的是把第三方类名、响应式断点、主题切换逻辑都纳入同一套层结构里对齐
