更改另一个元素的 CSS

Question

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

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

这是2个元素。当 SideBar 处于活动状态时，我希望页面的内容在右侧获得 100px 的填充，而不更改侧边栏中的任何内容

我知道我能做什么

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

但这会给补充工具栏也增加 100 像素的填充，这是我不想要的。我只想在 SideBar 处于活动状态时影响内容。感谢任何帮助

Answer 1

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

解决方案 1（如果您 HTML 中的#content "next" 到#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>

更改另一个元素的 CSS

Change CSS of another element

html

javascript

css

sidebar