CSS -如果div为空，则显示内容

0pizxfdo 于 2023-03-20 发布在其他

关注(0)|答案(3)|浏览(238)

是否可以根据另一个div的内容是否存在来创建条件div显示？我正在寻找一个仅使用CSS的解决方案。
我以前用过类似的方法：

.myClass:empty:before {
    content: 'content added to empty div';
}

添加内容到一个空的div。但是由于没有办法在创建的伪内容中创建超链接，我正在寻找另一种方法。

假设我的div结构如下所示：

<div class="div1"></div>
<div class="div2">This should be displayed</div>

如果div 1为空，是否可以使用css技巧来显示div 2;但如果Div 1有内容就隐藏它
随意重构div层次结构，我所寻找的并不依赖于当前的div结构。
我在找点子。谢谢。

css

来源：https://stackoverflow.com/questions/28638164/css-if-div-is-empty-display-content

3条答案

按热度按时间

6vl6ewon1#

我建议：

/* hiding the div.div2 element (and its content)
   if it's the next element-sibling of div.div1: */
div.div1 + div.div2 {
    display: none;
}

/* selecting the div.div2 element which is the next
   element-sibling of an empty (div.div1:empty)
   div.div1 element: */
div.div1:empty + div.div2 {
    display: block;
}

x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-03-20

nvbavucw2#

使用css-下一个元素选择器

.div1:empty + div{
    content: 'content added to empty div';
}

赞(0）回复(0）举报 2023-03-20

fwzugrvs3#

谢谢你的快速回答。基于Alexis Peters的回答，我创造了这个像符咒一样有效的答案。把它写下来以备将来参考：

div2 {
    display: none;
}

.div1:empty + .div2{
    display: block;
}

一个解释是（对于像我这样的探索者）上面的CSS说“设置div2不显示。如果任何idiv2跟在一个空的idiv1后面，那么设置显示为阻止”。
干杯。

赞(0）回复(0）举报 2023-03-20

我来回答

CSS -如果div为空，则显示内容

3条答案

相关问题

热门标签

最新问答