如何检查一个类是否具有CSS属性，并根据该类更改其他类的CSS属性

Question

类似于本例，当toggle-sidebar具有类别active时sidebar的宽度应该变为width:0;，content类的margin-left应该从60px变为0

这是供参考的代码：

.sidebar{
width: 60px;
}

.content{
margin-left: 60px;
}

<div class="wrapper">
<div class="header">
<div class="toggle-sidebar">icon</div>
</div>
<div class="main d-flex">
<div class="sidebar ">
<ul>
<li>Home</li>
<li>Dashboard</li>
<li>Contact Us</li>
<li>About us</li>                   
</ul>
</div>
<div class="content flex-fill"></div>
</div>
</div>

Answer 1

一般来说，您可以使用CSS选择器专用性(此处和此处阅读良好)来覆盖基于标记结构、屏幕大小等条件的某些样式。

特别是在您的示例中，您可以利用content元素正好在DOM中的sidebar元素之后这一事实，并使用+CSS运算符，该运算符仅在与选择器的第二部分(在+之后)匹配的元素紧接在与第一部分匹配的元素之后时才将其作为目标。像这样：

.sidebar + .content {
margin-left: 0;
}

在<style>标记中添加此规则将仅在.sidebar正好在其前面呈现的情况下将margin-left: 0;应用于.content，并且作为更具体的选择器，它将覆盖初始的.content声明。您将在开发人员工具的"元素"面板中看到margin-left: 60px;规则被划掉了。

此外，要仅在侧边栏打开时应用边距，您可以使用以下相同的技术：

.sidebar.sidebar-open + .content {
margin-left: 60px;
}