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

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

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