如何根據不同類別的改變另一個容器的高度

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中，而目前還沒有選擇取決於它的孩子的一個樣式父元素。至少不用香草CSS，我不確定這是否可以用Sass，Less或Stylus等預處理器來實現。

這裏有一個>選擇器，它只選擇父節點的直接子元素。請閱讀MDN Documentation獲取更多信息。

---

療法實際上是:has僞類，就像下面的代碼，但目前not supported它是通過任何瀏覽器：

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