如何检查一个类是否具有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 选择器特异性（好读 here 和 here）以便根据标记结构、屏幕大小等条件覆盖某些样式。

特别是对于您的示例，您可以利用 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;
}