在不使用 Jquery 或 Javascript 的情况下隐藏 Div [关闭]

Question

我在 html 中有两个 Div-Upper 和 lower

如果存在上div，我想显示下div，否则隐藏它。

我们可以使用 CSS 代替 Jquery 或 Javascript 吗？

注意：不应对上 div 进行任何操作。它会在某些情况下自动出现。

Answer 1

如果它们是相邻的，您可以使用 adjacent sibling combinator (+) 来做到这一点，方法是使用隐藏第二个的规则，然后使用组合器显示它的规则：

selector-for-the-second-div {
    display: none;
}
selector-for-the-first-div + selector-for-the-second-div {
    display: block;
}

实例：

.second {
  display: none;
}
.first + .second {
  display: block;
}

<div class="first">This is first</div>
<div class="second">This is second</div>
<hr>
<div class="second">This is second with no first</div>

如果他们是兄弟姐妹但不相邻，您可以使用general sibling combinator (~) 做同样的事情：

selector-for-the-second-div {
    display: none;
}
selector-for-the-first-div ~ selector-for-the-second-div {
    display: block;
}