隐藏Div而不使用Jquery或Javascript

Question

我在html中有两个Div-上下

我希望显示较低的div，如果存在上div，则隐藏它。

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

注意：不应对Upper div进行任何操作..在某些情况下会自动显示。

Answer 1

如果他们相邻，您可以使用adjacent sibling combinator（+）使用隐藏第二个的规则，然后使用组合子显示它的规则来执行此操作：< / p>

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

直播示例：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果他们是兄弟姐妹但不相邻，您可以使用general sibling combinator（~）执行相同的操作：

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