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

0pizxfdo  于 2023-03-20  发布在  其他
关注(0)|答案(3)|浏览(240)

是否可以根据另一个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结构。
我在找点子。谢谢。

6vl6ewon

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

nvbavucw

nvbavucw2#

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

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

fwzugrvs3#

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

div2 {
    display: none;
}

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

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

相关问题