因为媒体查询未纳入CSS层（@layer），默认处于最高优先级的未命名顶层，导致自定义层内样式被覆盖；必须将媒体查询嵌套在对应@layer块内，且该层声明顺序靠后才能生效。
为什么响应式框架的媒体查询总被你的自定义样式盖掉？
因为没把媒体查询规则放进 @layer，它就默认落在「未命名顶层」，天然高于你所有显式声明的层。比如 Bootstrap 的 @media (min-width: 768px) 规则，如果直接引入，哪怕你写了 @layer overrides，它的媒体查询仍会压过你层内同选择器的普通规则。
真正起效的前提是：媒体查询必须和它要控制的样式在同一个层里，且该层声明顺序靠后。
- 错误写法：
@layer components; @media (min-width: 768px) { .card { display: grid; } }→ 这条媒体查询不属于任何层，是 unlayered - 正确写法：
@layer components { @media (min-width: 768px) { .card { display: grid; } } } - 更稳妥做法：把整个框架 CSS 用
@import "bootstrap.css" layer(framework);导入，再在@layer overrides中写响应式修复
@layer + @media 混用时，层序和断点谁优先？
层序永远先于媒体查询生效条件。浏览器先按层决定“哪组规则能参与本轮计算”，再在该层内执行媒体查询匹配。
这意味着：即使你的 @layer overrides 里只写了桌面端断点，而 @layer framework 里写了移动/桌面双断点，只要 overrides 层声明在后，它的桌面规则就会覆盖 framework 中所有匹配该断点的规则——包括移动断点里本不该生效的那部分。
立即学习“前端免费学习笔记（深入）”；
- 典型陷阱：你在
@layer overrides中写@media (max-width: 600px) { .btn { padding: 4px; } }，但忘了framework层里有@media (min-width: 601px) and (max-width: 900px)的同选择器规则 → 后者不会被覆盖，因为它不匹配你的断点 - 安全策略：对关键响应式组件，统一用相同断点范围声明，例如全部用
@media (width >= 600px)（现代语法）或补全所有区间 - 检查方式：DevTools → Elements → 右侧 Styles 面板，看被划掉的规则是否带「layer」标识；没标识的，说明根本没进层
第三方响应式库（如 Tailwind、Chakra）怎么收编进 layer？
不能只靠 @import url("tailwind.css") layer(utilities); —— 多数构建产物里已剥离 @layer 声明，导入后仍是 unlayered。必须确认库是否原生导出分层样式。
- Tailwind v3.4+ 支持
@layer base, components, utilities;输出，但需开启content扫描并配置layer选项 - Chakra UI v2.8+ 默认导出
@layer chakra;，可直接写@layer chakra, overrides;，然后在@layer overrides中覆盖 - 老版本或无分层支持的库（如早期 Bootstrap），唯一可靠方式是：用构建工具（Vite 插件
postcss-cascade-layers）在打包时自动包裹其 CSS 内容 - 切忌手动复制粘贴整份 CSS 到
@layer framework { }—— 体积膨胀、更新断裂、Source Map 失效
响应式调试中最容易忽略的层叠维度
很多人盯着 DevTools 里 Specificity 值调选择器权重，却漏看「层位置」。当一条响应式规则失效，先查三层：
- 它是否被包裹在某个
@layer块中？如果不是，它就在最高优先级的 unlayered 层 - 它所属的层名，是否已在文件最顶部用
@layer xxx;显式声明？没声明=降级为普通样式 - 它的层是否比冲突规则的层声明得更晚？比如
@layer mobile, desktop;中，desktop层内规则必然压过mobile层内同选择器规则
真正的难点不在语法，而在项目初期就约定好响应式层的语义边界：比如 @layer breakpoints 专放媒体查询基础断点，@layer responsive-components 放组件级响应逻辑，@layer theme-overrides 放主题适配 —— 否则后期加个 @media 就得翻遍十几个文件找层声明。
