Question

是否可以根据另外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>

如果div1为空，是否可以执行css技巧来显示div2;但如果div1有内容，请隐藏它？

随意重构div层次结构，我正在寻找的不依赖于当前的div结构。

寻找想法。谢谢。

Answer 1

我建议：

/* 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;
}

＆＃13;

/* 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;
}

div.div1 {
  border: 1px solid #f00;
  color: #f00;
}

div.div2 {
  color: #0f0;
  border: 1px solid #0f0;
  margin-bottom: 1em;
}

＆＃13;

<div class="div1"></div>
<div class="div2">This should be displayed</div>

<div class="div1">This is 'div.div1' (it has content)</div>
<div class="div2">This should not be displayed</div>

＆＃13;

Answer 2

使用css- next元素选择器

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

Answer 3

感谢您的快速解答。根据Alexis Peters的回答，我创造了一个像魅力一样的作品。把它放下以备将来参考：

div2 {
    display: none;
}

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

解释是（对于像我这样的探险家）上面的CSS说“将div2设置为不显示。如果任何.div2跟随空.div1然后将显示设置为阻止”。

干杯。

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

3 个答案: