CSS中能否组合或嵌套多个@规则 需满足多重@条件才生效？

解决方案 #

CSS 原生支持多个@规则的嵌套组合，只要将一个@规则写在另一个@规则的作用块内，即可实现多个@条件同时满足时样式才生效的需求。

你可以直接将@media规则嵌套进@supports规则内部，写法如下：

@supports (-webkit-overflow-scrolling: touch) {
  @media only screen and (min-device-width: 1366px) and (max-device-height: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
    .widget-wrap {
      /* 此处写入目标样式，仅当两个@条件同时满足时才会生效 */
    }
  }
}

补充说明：

• 你也可以反过来将@supports嵌套在@media内部，两种写法效果完全等效，没有性能差异，可根据自身代码逻辑习惯选择
• 该语法所有主流现代浏览器（Chrome、Firefox、Safari、Edge）均已支持，无需额外兼容性处理
• 除了@supports和@media的组合，你还可以嵌套更多层级的@规则（比如@layer、@container等），实现更多维度的条件控制

内容的提问来源于stack exchange，提问作者William Cox