如何通过CSS容器查询基于内部元素尺寸样式化外部元素？

CSS容器查询（Container Queries）的核心限制是只能作用于容器的后代元素，无法直接向上选择父级或外部元素，你示例中.parent无法被容器查询命中完全符合规范。以下是几种可行的实现技巧：

1. 视觉层重构：将父级视觉元素转为容器后代 #

如果布局允许，把需要改变样式的父级视觉部分拆出来，用绝对定位放到容器内部，使其成为容器的后代，这样就能被容器查询控制：

<div class="wrapper">
  <div class="container">
    <!-- 父级视觉元素，作为容器后代 -->
    <div class="parent-visual"></div>
    <div class="child"></div>
  </div>
</div>

.wrapper {
  position: relative;
  width: 500px;
  height: 500px;
}
.parent-visual {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: blue;
}
.container{
  container-name: test;
  container-type: size;
  background-color: grey;
  width: 300px;
  height: 300px;
  position: relative;
  z-index: 1; /* 保证容器内容在视觉元素上方 */
}
.child{
  background-color: red;
  width: 100px;
  height: 100px;
}
@container test (min-height: 50px) {
    .child {
      background-color: green;
    }
    .parent-visual{
      background-color: green;
    }
}

2. JavaScript辅助监听尺寸变化 #

如果纯CSS方案无法适配布局，用ResizeObserver监听容器或内部元素的尺寸变化，动态给父级元素添加/移除样式类：

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

.parent{
  background-color: blue;
  width: 500px;
  height: 500px;
}
.parent--active {
  background-color: green;
}
.container{
  container-name: test;
  container-type: size;
  background-color: grey;
  width: 300px;
  height: 300px;
}
.child{
  background-color: red;
  width: 100px;
  height: 100px;
}
@container test (min-height: 50px) {
    .child {
      background-color: green;
    }
}

const container = document.querySelector('.container');
const parent = document.querySelector('.parent');

// 监听容器尺寸变化
const observer = new ResizeObserver(entries => {
  entries.forEach(entry => {
    // 根据容器高度判断是否触发样式变化
    if (entry.contentRect.height >= 50) {
      parent.classList.add('parent--active');
    } else {
      parent.classList.remove('parent--active');
    }
  });
});

observer.observe(container);

3. 利用CSS变量结合布局反转（局限性较大） #

如果父级和容器的布局关系允许，可以通过CSS变量传递状态，但注意CSS变量是向下继承的，所以需要将父级的样式依赖于容器定义的变量：

.parent{
  /* 父级样式依赖容器的变量 */
  background-color: var(--parent-bg, blue);
  width: 500px;
  height: 500px;
}
.container{
  container-name: test;
  container-type: size;
  background-color: grey;
  width: 300px;
  height: 300px;
  /* 默认变量值 */
  --parent-bg: blue;
}
.child{
  background-color: red;
  width: 100px;
  height: 100px;
}
@container test (min-height: 50px) {
    .child {
      background-color: green;
    }
    /* 容器查询中修改变量 */
    .container {
      --parent-bg: green;
    }
}

注意：这种方法仅在父级能继承容器的CSS变量时生效，若父级和容器之间有阻断继承的元素，此方案失效。

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