目标上部div与较低的div

Question

当upperdiv拥有lowerdiv类时，我希望.active的背景变为红色：

<div id="upperdiv">Text case</div>
<div id="lowerdiv" class="active">IMAGE CAROUSEL</div>

JavaScript正在添加

.active。 Example image

我试过了：

#upperdiv + #lowediv .active {
    background: red;
}

但它没有用。

CSS或jQuery可以实现吗？

Answer 1

如果我正确理解了这个问题，那么你正试图选择以前的兄弟姐妹。使用CSS无法做到这一点。但是，使用JavaScript可以获得所需的结果。将活动类添加到下部div时，使用脚本更改上部div的背景颜色。

有关详细信息，请参阅Is there a "previous sibling" CSS selector?。

Answer 2

首先我要警告说，OP不会像以前的兄弟造型一样要求破解不可能的CSS。所以我要求人们在关注或滥用这个答案之前仔细阅读问题。

使用CSS可以通过两种方式获取它，但是您可以仅针对特定情况使用这些方法。常见的要求是两个div应该逐个来。

第一种方法是使用位置属性交换div。我的意思是低级div应该首先出现在你的HTML中：

<div id="lowerdiv" class="active">IMAGE CAROUSEL</div>
<div id="upperdiv">Text case</div>

＆＃13;

＆＃13;

div {
  position: absolute;
  width: 100%;
  height: 50px;
  margin: 0;
  left: 0;
  background: orange;
}
#upperdiv {
  margin-top: 0px;

}
#lowerdiv{
  margin-top: 50px;
}

#lowerdiv.active + #upperdiv {
  background: red;
}

＆＃13;

<div id="lowerdiv" class="active">IMAGE CAROUSEL</div>
    <div id="upperdiv">Text case</div>

＆＃13;

＆＃13;

＆＃13;

第二种方法是使用::before伪元素将其置于upperdiv下作为背景：

＆＃13;

＆＃13;

div {
  position: relative;
  width: 100%;
  height: 50px;
  margin: 0;
  left: 0;
  background: transparent;
}

#lowerdiv{
  background: orange;
}

#lowerdiv.active:before {
  content: " ";
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  bottom: 100%;
  background: red;
  z-index: -1;
}

＆＃13;

<div id="upperdiv">Text case</div>
<div id="lowerdiv" class="active">IMAGE CAROUSEL</div>

＆＃13;

＆＃13;

＆＃13;

第三种方式确实存在，但这超出了问题的条件。