<分区>
<分区>
我有下面的 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')";
}
谁能帮帮我。提前致谢
:没有工作
最佳答案
没有< CSS 中的选择器，目前没有根据其子元素之一设置父元素样式的选项。至少不能使用 vanilla CSS，我不确定这是否可以通过 Sass、Less 或 Stylus 等预处理器实现。
实际上有一个>选择器，仅选择父节点的直接子节点。请阅读MDN Documentation了解更多信息。
实际上是:has伪类，其工作方式类似于下面的代码，但当前为 not supported通过任何浏览器:
.parent:has(> child) {
/* Style Rules */
}
关于css - 如何根据不同的类更改另一个容器的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46400947/