原生CSS媒体查询嵌套必须位于选择器块内部，不能独立书写或跨选择器复用；正确写法是@media嵌套在选择器大括号内，如.card { @media (min-width: 768px) { width: 50%; } }，其内部子选择器自动继承父级上下文。
媒体查询嵌套必须写在选择器块内部
原生CSS中，@media不能独立存在或跨选择器复用，必须作为子规则嵌套在某个选择器声明块里。它不是“全局开关”，而是“局部条件分支”——只影响当前父选择器及其内部嵌套的子规则。
常见错误是把@media写在顶层，像预处理器那样集中管理：
.card { width: 100%; }
@media (min-width: 768px) {
.card { width: 50%; }
}
这在原生嵌套中无效；浏览器会忽略该@media块里的所有嵌套逻辑（比如.card .title不会自动带上.card前缀）。
正确做法是把它塞进.card的花括号里：
.card {
width: 100%;
@media (min-width: 768px) {
width: 50%;
.title { font-size: 1.5rem; }
}
}
-
@media块内可继续嵌套子选择器，它们会自动继承父选择器上下文（即.title→.card .title） - 不支持在
@media块外再写同级规则来“共享”断点，每个选择器得自己嵌套 - 多个断点需重复嵌套，无法定义一次然后
@use或@import
&符号在媒体查询嵌套中不强制出现
媒体查询内部的子规则默认延续父选择器上下文，所以.title会被解析为.card .title，不需要写成& .title。但如果你想精确控制组合方式，&依然可用：
.card {
@media (min-width: 768px) {
&.expanded { display: flex; } /* → .card.expanded */
& > .header { padding: 1rem; } /* → .card > .header */
}
}
注意：&在这里不是必需的，但能显式表达意图，尤其当涉及复合关系（如&.expanded）或直接子元素（& > .header）时，比省略更安全。
- 省略
&时，.header→.card .header（后代选择器） - 写
& > .header→.card > .header（仅直接子元素） - 写
&.expanded→.card.expanded（同一元素多类名）
容器查询也能嵌套，但语法略有不同
如果你用的是@container而非@media，嵌套逻辑一致，但触发条件变了：它依赖组件自身容器尺寸，而非视口。写法上只需替换关键词：
.card {
container-type: inline-size;
@container (min-width: 400px) {
.title { font-size: 1.3rem; }
}
}
这里@container和@media一样，必须嵌套在已声明container-type的选择器内部，否则无效。
- 没有
container-type声明，@container块会被完全忽略 -
@container不支持max-width等旧式语法，只认size相关条件（如inline-size、block-size） - 嵌套层级过深（比如
@container里再套@media）目前部分浏览器支持不稳定，建议扁平化处理
嵌套媒体查询的优先级和性能要注意
每次嵌套都会生成新的选择器组合，可能无意中放大特异性（specificity），特别是当混用&.active和.item这类写法时。
例如：
.sidebar {
@media (min-width: 1024px) {
&.collapsed { width: 60px; }
.nav-item { padding: 8px; }
}
}
编译后变成：
.sidebar.collapsed { width: 60px; }
.sidebar .nav-item { padding: 8px; }
前者特异性高于.collapsed单独使用，后者则和普通后代选择器一致。
- 避免在
@media块内大量使用&拼接，容易导致选择器爆炸（如& & & .item） - 嵌套层数建议≤3层，否则调试困难且CSS体积增长明显
- 某些旧版Chromium（v115之前）对嵌套
@media的解析有bug，遇到样式不生效先查浏览器版本
真正难的不是写法，而是判断哪些规则值得嵌套、哪些该抽离成独立选择器——上下文太强反而降低复用性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
