更改另一个元素的CSS [重复]

Question

此问题已经在这里有了答案：

How to affect other elements when one element is hovered（6个答案）

[<9天前关闭。

我有2个视图。我要在第一个元素处于活动状态时更改第二个元素的样式

WITHOUT修改第一个元素

#sidebar.active {
  margin-left: 0 !important;
}   
#content{
  padding-right:100px;
}

这些是2个元素。当补充工具栏处于活动状态时，我希望页面的内容在右侧获得100px的填充，而无需从补充工具栏中更改任何内容
我知道我能做什么
#sidebar.active , ##content {
  margin-left: 0 !important;
  padding-right:100px;
}   

但是这也会使补充工具栏也有100px的填充，这是我不想要的。我只想在补充工具栏处于活动状态时影响内容。任何帮助表示赞赏

Answer 1

您可以使用纯CSS来实现，具体取决于您的HTML标记。

解决方案1（如果#content在HTML中的#sidebar旁边“正确”：

.container {
  display: block;
  margin: 10px;
}

#sidebar {
  /* for demonstration */
  width: 100px;
  height: 50px;
  background-color: red;
  display: inline-block;
  vertical-align: top;
  
  margin-left: 0;
}

#content {
  /* for demonstration */
  width: 100px;
  height: 50px;
  background-color: orange;
  display: inline-block;
  vertical-align: top;
}

#sidebar.active + #content {
  padding-right: 100px;
}

<div class="container">
  <div id="sidebar">
    INACTIVE sidebar
  </div>
  <div id="content">
    content
  </div>
 </div>

 <div class="container">
  <div id="sidebar" class="active">
    ACTIVE sidebar
  </div>
  <div id="content">
    content
  </div>
</div>

解决方案2（如果#content是HTML中#sidebar的子元素：

.container {
  display: block;
  margin: 10px;
}

#sidebar {
  /* for demonstration */
  width: ;
  height: 50px;
  background-color: red;
  display: inline-block;
  vertical-align: top;

  margin-left: 0;
}

#content {
  /* for demonstration */
  width: 100px;
  height: 50px;
  background-color: orange;
  display: inline-block;
  vertical-align: top;
}

#sidebar.active #content {
  padding-right: 100px;
}

<div class="container">
  <div id="sidebar">
    INACTIVE sidebar

    <div id="content">
      content
    </div>
  </div>
</div>

<div class="container">
  <div id="sidebar" class="active">
    ACTIVE sidebar
    <div id="content">
      content
    </div>
  </div>
</div>