地址运算符（&）与@media查询配合失效，嵌套使用疑问

先修正基础语法错误 #

你代码里的. connection多了个空格，这会导致整个选择器失效，必须改成.connection（类选择器的点和类名之间不能有空格）。

正确的@media嵌套写法 #

你的核心问题是对嵌套中&的指向逻辑理解有误，下面两种写法都能正常生效：

写法1：把@media嵌套在子选择器内部（更直观）

.connection {
  & > .list {
    /* 针对该子元素的媒体查询 */
    @media only screen and (max-width: 1200px) {
      grid-template-columns: 1fr;
    }
  }
}

编译后的原生CSS：

@media only screen and (max-width: 1200px) {
  .connection > .list {
    grid-template-columns: 1fr;
  }
}

写法2：把@media放在父选择器内部

如果坚持要在.connection的嵌套块里写@media，只需确保&正确指向.connection即可，修正空格后的代码本身是有效的，你之前的失效大概率是因为那个空格错误：

.connection {
  @media only screen and (max-width: 1200px) {
    & > .list {
      grid-template-columns: 1fr;
    }
  }
}

这段代码编译后和写法1的结果完全一致。

注意事项 #

• 确保你使用的预处理器（Sass/Less/PostCSS）支持CSS嵌套语法，比如PostCSS需要安装postcss-nested插件。
• &始终代表当前嵌套层级的父选择器，在@media内部使用时，它指向的是@media外面的.connection，所以& > .list会被解析为.connection > .list。

内容的提问来源于stack exchange，提问作者Vikram Puri