如何为CSS container queries设置多条件？

重要提示 - 此代码仅在开启container queries的浏览器中生效

目前CSS容器查询不支持使用and直接连接多个条件，这就是你示例中蓝色背景规则不生效的原因。容器查询的多条件判断必须通过嵌套@container规则的方式实现，就像你写的黄色背景的写法那样。

原理说明 #

容器查询的语法和媒体查询并不完全一致，当前规范中，单个@container只能定义一个条件，多条件需要通过多层嵌套来组合——只有当所有嵌套层的容器条件都满足时，内部的样式才会被应用。

修正后的代码示例 #

.tile {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  resize: both;
  overflow: auto;
  container-type: size;
  container-name: tile;
}

.tile__inner {
  width: 100%;
  height: 100%;
}

/* 嵌套实现同时满足min-width和min-height条件 */
@container tile (min-width: 100px) {
  @container tile (min-height: 100px) {
    .tile__inner {
      background: yellow;
    }
  }
}

/* 如果需要另一个多条件触发的样式，同样用嵌套 */
@container tile (min-width: 120px) {
  @container tile (min-height: 120px) {
    .tile__inner {
      background: blue !important;
    }
  }
}

<div class="tile">
  <div class="tile__inner"></div>
</div>

你可以调整元素大小测试：当宽高都≥100px时背景变黄，宽高都≥120px时背景变蓝。

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