css - 根据内容显示/隐藏同级 div

Question

您好 – 我想根据另一个 div 中的内容显示一个 div 中的内容。例如，如果sibling1为空，我想隐藏sibling2(在下面的parent1中)。如果sibling1有内容，我想显示sibling2(下面的parent2)。我希望能够使用 CSS 来做到这一点，这可能吗？如果没有，我也可以使用简单的 JavaScript 建议。

<!---hide sibling2--->
<div class="parent1">
    <div class="sibling1"></div>
    <div class="sibling2">hide</div>
</div>

<!---show sibling2--->
<div class="parent2">
    <div class="sibling1">has content</div>
    <div class="sibling2">show</div>
</div>

Answer 1

.parent {
  height: 100px;
  border: 1px solid;
 }
.sibling1 { background: green; }
.sibling2 { background: red; }
.sibling1:empty + .sibling2 { display: none; }

<!---hide sibling2--->
<div class="parent">
    <div class="sibling1"></div>
    <div class="sibling2">hide</div>
</div>

<!---show sibling2--->
<div class="parent">
    <div class="sibling1">has content</div>
    <div class="sibling2">show</div>
</div>