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

我遇到以下问题。我有一个div里面有2个元素。第一个元素可以在里面有孩子。第二个元素只有文本。如果上一个元素中包含元素，则隐藏文本

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

好的，这很难理解，所以这里是reproducible fiddle。正如你所看到的，我有2个盒子（第一个元素）和第二个元素中的文本。所以用这种方式我想要隐藏文本的div。但是，如果我将删除框，文本应该出现。

使用javascript没有这个问题（计算span里面的元素的大小，如果0-显示文本，而不是0-隐藏文本）。问题是我试图用纯HTML和CSS来实现。

有没有办法做到这一点？

来源

2014-04-01 Salvador Dali

小号alvadorDalì：为了避免伪造你的测试，我访问了你的个人资料，因为你的昵称：D –

@AndreaLigios抱歉，我不是真的达利:-( –

你可以伪造它;

给容器一个固定的高度和一个隐藏的溢出;
给文本一个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; 
}

来源

2014-04-01 09:25:21

谢谢你的魔力。这真太了不起了。 –

-1

您可以使用CSS3这个

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

或

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

检查Jsfiddle Demo

来源

2014-04-01 07:15:23

它是'：empty：'，而不是'：emtpy'，它有限制浏览器的支持，它测试的是空洞，而不是缺乏内在元素。例如，它与''不匹配，更不是' foo'。 –

对不起，但它不起作用。 –

不，它不是在CSS可能有一个选择，将根据选择的元素无论其兄弟姐妹是否有孩子。

来源

2014-04-01 07:38:59

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

回答

相关问题