如何在CSS中组合@supports与@media查询实现特定浏览器样式？

很遗憾，CSS并不支持直接把@media媒体查询和@supports特性查询用and运算符合并成你想要的那种写法哦。

为什么不行？ #

这两个规则虽然都是CSS的条件判断语法，但属于完全不同的条件类型：

• @media是基于设备、视口特性的媒体查询
• @supports是基于浏览器CSS特性支持度的特性查询

CSS的语法规范里，并没有允许跨类型的条件组规则直接用逻辑运算符组合，所以你写的@media(min-width: 1400px) and @supports(not(-ms-high-contrast:active))这种形式是无效的，浏览器会直接忽略这个规则块。

最简洁易读的替代方案 #

虽然你提到知道嵌套写法，但其实优化后的嵌套已经足够简洁直观了，推荐两种写法：

写法一：先排除IE，再匹配视口宽度

@supports not (-ms-high-contrast: active) {
  @media (min-width: 1400px) {
    /* 这里写你的目标样式 */
    .example-element {
      padding: 2rem;
      max-width: 1200px;
    }
  }
}

写法二：先匹配视口宽度，再排除IE

@media (min-width: 1400px) {
  @supports not (-ms-high-contrast: active) {
    /* 这里写你的目标样式 */
  }
}

这两种写法逻辑完全等价，选你觉得更符合阅读习惯的就行——本质上都是通过嵌套实现两个条件的“且”逻辑，也是目前CSS里最标准、易维护的方案。

如果非要追求“一行式”的视觉效果，目前CSS没有原生语法支持，强行用其他技巧（比如CSS变量间接关联）反而会增加代码复杂度，得不偿失。

内容的提问来源于stack exchange，提问作者Nathan Wiles