：父元素

Question

空選擇我有一個div具有頭部元件和ul我在其中加載li項目：

<div class="listContainer"> 
    <header>Title</header> 
    <ul class="list"> 
     <li>Test Element</li> 
     <li>Test Element</li> 
     <li>Test Element</li> 
    </ul> 
</div> 

在這種情況下.listContainer需要是可見的整體。

但有可能隱藏與CSS :empty選擇整個容器，如果.list是空的，就像這樣：

<div class="listContainer"> 
    <header>Title</header> 
    <ul class="list"> 
    </ul> 
</div> 

現在我使用的:empty選擇隱藏ul，但整個.listContainer需要隱藏。

.list:empty { display: none; } 

我知道這是可能的JavaScript，但在這種情況下，我需要用CSS來做，但我不知道這是否可能。

Answer 1

我可以提供（銘記沒有家長選擇爲CSS）最好的，是你的HTML重組以下幾點：

<div class="listContainer"> 
    <ul class="list"></ul> 
    <header>Title</header> 
</div> 
<div class="listContainer"> 
    <ul class="list"> 
     <li>Non-empty</li> 
    </ul> 
    <header>Title</header> 
</div> 

，並使用以下CSS：

.listContainer { 
    position: relative; 
    border: 2px solid #000; 
} 

.listContainer header { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
} 

.listContainer .list { 
    margin-top: 2em; 
} 

.list:empty, 
.list:empty + header { 
    display: none; 
    height: 0; 
    margin: 0; 
    overflow: hidden; 
} 

JS Fiddle demo。

不幸的是，這需要一些醜陋的黑客來定位header元素，並且不會精確地隱藏.listContainer（因爲再次，這不可能基於子元素），但它確實接近您的要求。

隨着與上述相同的HTML，但使用柔性盒模型（如目前，作爲該時間和日期，在Webkit的實現）重新排序的元素顯示，並且因此避免了position: absolute醜陋：

.listContainer { 
    border: 1px solid #000; 
    display: -webkit-flex; 
    -webkit-flex-direction: column; 
    -webkit-flex-wrap: nowrap; 
} 

.listContainer header { 
    display: -webkit-flex-block; 
    -webkit-order: 1; 
    -webkit-flex: 1 1 auto; 
} 

.listContainer .list { 
    display: -webkit-flex-block; 
    -webkit-flex-direction: column; 
    -webkit-order: 2; 
    -webkit-flex: 1 1 auto; 
} 

.listContainer .list:empty, 
.listContainer .list:empty + header { 
    width: 0; 
    height: 0; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    display: none; 
} 

JS Fiddle demo。