4

我有一个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,但我不确定这是否可能。

4

1 回答 1

3

我能提供的最好的(记住 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 小提琴演示

于 2013-05-09T20:52:13.607 回答