如何在没有“jquery”的情况下检查一个类是否具有 css 属性并基于该类更改其他类的 css 属性

Question

就像在这个例子中，如果侧边栏类的width:0; 然后将内容类的margin-left从60px为0这里是参考代码：

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

 <div class="wrapper"> <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>标签中添加此规则将应用margin-left: 0; to .content仅当.sidebar在它之前呈现时，并且作为更具体的选择器，它将覆盖初始.content声明。 您将在开发者工具的 Elements 面板中看到margin-left: 60px; 规则被划掉。

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

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