容器查询：为什么我无法在容器查询中设置容器选择器的样式

Question

使用容器查询时。我无法在容器查询本身中设置容器查询设置的元素的样式。就像下面这样。

.container {
  width: 250px;
  height: 250px;
  background-color: hotpink;
  container-type: inline-size;
}

@container (max-width: 768px) {
  /* This selector doesn't work here */
  .container {
    background-color: red;
  }
}

<div class="container"></div>

有谁知道为什么不能这样做？

Answer 1

我认为主要问题是：

• 目标@container是容器元素内部的东西，所以你不能定位容器本身

下面是带有测试 div 的容器，它使用容器查询交换背景颜色。

如果将宽度放回到容器上，那么它将只显示一个背景，因此由于容器无法更改大小，因此不需要查询。

.container {
  container-type: inline-size;
}

.test {
  width: 250px;
  height: 250px;
  background-color: hotpink;
}

@container (max-width: 768px) {
  .test {
    background-color: red;
  }
}

<div class="container">
  <div class="test"></div>
</div>