容器查询疑问：为何无法在容器查询中为容器选择器设置样式

这是因为容器查询（@container）的作用范围是容器元素的子元素，而非容器元素本身。

你写的@container规则是基于.container这个容器的尺寸触发的，但规则内部的选择器会在该容器的后代元素里匹配.container，而你的DOM结构里只有一个.container元素，它没有子元素，所以这个选择器找不到任何目标，自然不会生效。

如果要给容器本身根据自身尺寸设置样式，要么改用媒体查询（@media），要么换个结构：把目标容器包在一个父容器里，给父容器设置container-type，再在@container里选择内部的目标容器。示例代码如下：

/* 父容器作为查询容器 */
.container-wrapper {
  container-type: inline-size;
}

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

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

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

这样当父容器的内联轴尺寸小于768px时，内部的.container就会触发样式变化。

内容的提问来源于stack exchange，提问作者Rogier de Ruijter