如何根据不同的类更改另一个容器的高度

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')"; }

我希望在调用experimental-bar-minimal类时更改容器的高度

我用过

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 */
}