Question

我有以下问题。我有一个div里面有2个元素。第一个元素可以在其中包含子元素。第二个元素只有文本。

如果前一个元素中没有元素，我想显示文本。

好的，这很难理解，所以这里有reproducible fiddle。如你所见，我有2个盒子（在第一个元素内）和第二个元素中的文本。所以这样我希望隐藏文本的div。但如果我要删除这些框，则应显示文字。

使用javascript完全没有问题（计算span内部元素的大小，如果0 - 显示文本，而不是0 - 隐藏文本）。问题是我试图用纯HTML和CSS实现相同的目标。

有办法做到这一点吗？

Answer 1

你可以假装它;

给容器一个固定的高度和一个隐藏的溢出;
为文本提供100％的最小宽度和内联块显示;

如果之前有某些内容，文本将被按下并隐藏：

Running demo

HTML

With squares, Text doesn't show:
<div class="content">
    <span>
        <div class="box"></div>
        <div class="box"></div>
    </span>
    <div class="content-empty">Text</div>
</div>

Without, it does:
<div class="content">
    <span></span>
    <div class="content-empty">Text</div>
</div>

CSS

.content {
    border: 2px dashed #bbb;
    margin-top:20px;
    height: 94px;  /* new */
    overflow: hidden; /* new */
}
.box {
    width: 80px;
    height: 80px;
    border: 2px solid #444;
    display: inline-block; /* new */
    margin: 5px;
    background-color: #eee;

}
.content-empty {
    text-align: center;
    vertical-align: middle;
    line-height: 94px;
    font-size: 26pt;
    display: inline-block; /* new */
    min-width: 100%; /* new */
    background: silver;
}

Answer 2

不，在CSS中不可能有一个选择器根据它的兄弟是否有孩子而选择一个元素。

Answer 3

您可以将css3用于此

.content > span:empty + .content-empty{display: none;}

或

.content > span + .content-empty{display: none;}

检查Jsfiddle Demo

如果前一个元素中包含元素，则隐藏文本

3 个答案: