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

【问题标题】：CSS - if div is empty, display contentCSS - 如果 div 为空，则显示内容
【发布时间】：2015-02-21 05:19:17
【问题描述】：

是否可以根据另一个 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 结构。

寻找想法。谢谢。

【问题讨论】：

标签： html css

【解决方案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;
}

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

<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>

【讨论】：

【解决方案2】：

使用css-下一个元素选择

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

【讨论】：

"由于无法在创建的伪内容中创建超链接，我正在寻找另一种方式"
哦，是的，但是 + 可能会显示：阻止次要元素！

【解决方案3】：

感谢您的快速回答。根据亚历克西斯彼得斯的回答，我创造了这个像魅力一样的作品。记下来以备将来参考：

div2 {
    display: none;
}

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

一个解释是（对于像我这样的探索者）上面的 CSS 说“将 div2 设置为不显示。如果任何 .div2 跟在一个空的 .div1 之后，则将显示设置为阻止”。

干杯。

【讨论】：