: 父元素的空选择器答案

【问题标题】：:empty selector for parent element: 父元素的空选择器
【发布时间】：2013-05-10 05:27:14
【问题描述】：

我有一个带有标题元素的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 需要可见。

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

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

现在我正在使用:empty 选择器来隐藏ul，但需要隐藏整个.listContainer。

.list:empty { display: none; }

我知道使用 JavaScript 是可能的，但在这种情况下，我需要单独使用 CSS，但我不确定这是否可能。

【问题讨论】：

CSS 中没有父选择器，因此整个.listContainer 不会因为子.list 为空（或其他）而受到影响。此外，要应用 :empty，您需要一个完全没有内容的元素（甚至不是 textNode）。
我是这么认为的，但是谢谢！
最终，这可能使用CSS4 selectors: .listContainer! > .list:empty （除了@DavidThomas 指出的textNode 问题）。
@MattCoughlin: nope, doesn't seem that way any more，至少不在选择器级别 4 中（目前，当然，这可能会发生变化）。

标签： css

【解决方案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，但使用 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 Fiddle demo.

【讨论】：