如何根据不同的类改变另一个容器的高度[重复]

Question

我下面有 Html 结构

<div>
   <div class="experimental-bar experimental-bar-minimal"></div>
</div>
<div class="experimental-border">
   <div class="container"></div>
</div>

CSS：

.experimental-bar { height: 50px; }
.experimental-bar-minimal {height: 25px; }

.container { height: ~"calc('100vh - 50px')"; }

我想在调用实验栏最小类时更改容器的高度

我用过

div:has(.experimental-bar) + .experimental-border .f8-wi-container {
  height:  ~"calc('100vh - 50px')";
}
div:has(.experimental-bar-minimal) + .experimental-border .f8-wi-container {
  height:  ~"calc('100vh - 25px')";
}

谁能帮帮我。提前致谢

：没有工作

Answer 1

CSS 中没有< 选择器，目前没有选项可以根据其中一个子元素设置父元素的样式。至少不能使用 vanilla CSS，我不确定这是否可以使用 Sass、Less 或 Stylus 等预处理器来实现。

实际上有一个> 选择器，它只选择父节点的直接子节点。请阅读MDN Documentation 了解更多信息。

---

实际上是 :has 伪类，它的工作方式类似于下面的代码，但目前任何浏览器都是 not supported：

.parent:has(> child) {
    /* Style Rules */
}