你可以嵌套 @media 和 @support 查询吗？

是的，可以，嵌套顺序并不重要。不需要 CSS 预处理器。它在常规 CSS 中起作用。

这有效

@supports(--a: b) {
  @media (min-width: 1px) {
    body {
      background: red;
    }
  }
}

同样，反向嵌套也有效

@media (min-width: 1px) {
  @supports(--a: b) {
    body {
      background: green;
    }
  }
}

如果需要，你可以继续进行嵌套

@media (min-width: 2px) {
  @media (min-width: 1px) {
    @supports (--a: b) {
      @supports (display: flex) {
        body {
          background: pink;
        }
      }
    }
  }
}

可能在逻辑变得难以控制时需要小心。但是，它确实有效。据推测，你可以“无限”嵌套 @规则。

乍一看，嵌套代码看起来像是在使用 CSS 预处理器，但事实并非如此。常规 CSS 可以很好地处理这种情况，实际上，CSS 预处理器根本没有意义地进行操作（已测试 Sass、Less 和 Stylus）。