父元素的：empty选择器

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必须可见。

但是:empty，如果.list为空，则可以使用CSS 选择器隐藏整个容器，如下所示：

<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;
}

不幸的是，这确实需要进行一些丑陋的修改才能放置该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;
}