css - 是否可以在 CSS 中组合或嵌套多个 "@-rules"......所以在执行规则之前需要不同的 "@"？

Question

例如，我如何使两个“@”条件都需要？:

@supports (-webkit-overflow-scrolling: touch) {
  .widget-wrap {}
}

@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 {}
}

Answer 1

来自 MDN's "At-rules" CSS Page :

[Conditional Group Rule] statements share a common syntax and each of them can include nested statements—either rulesets or nested at-rules.

所以你应该能够把它写成:

@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 {}
    } 
}

如 user Heretic Monkey正确指出，值得注意的是，这仅适用于 CSS Conditional Rules as defined by a W3 modules of the same name ，截至 2021 年 6 月，其中包括 @media , @supports ，和现在 deprecated @document 规则； 其他规则不可嵌套。