我能提供的最好的(记住 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 小提琴演示。
不幸的是,这确实需要一些丑陋的黑客来定位header
元素,并且不能精确地隐藏.listContainer
(因为再次,这不可能基于子元素),但它确实接近您的要求。
使用与上面相同的 HTML,但使用 flex-box 模型(目前,截至目前,在 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 小提琴演示。