Show/hide 兄弟 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>

Show/hide 兄弟 div 基于内容

Show/hide sibling div based on content

css

logic

conditional-statements