html - 如何排除css中的特定类？

Question

这是我的CSS：

.single-post .container {
    width: 60%;
}

not(.single-post) .container{
            min-width:92%;
    }

我想要实现的是：我希望容器宽度在单个帖子页面上为 60%，在其他每个页面上为 92%。所以，我试图通过使用not(.single-post)从第二行代码中排除.single-post类，但它不起作用。

但是，第一行代码工作正常。

标签： htmlcsstwitter-bootstrapbootstrap-4

Answer 1

您可以先声明一般情况，然后再声明更具体的情况。声明的顺序很重要（级联）。运行以下示例进行检查。

.container{
    width:92%;
    background-color: blue;
}

.single-post .container {
    width: 60%;
    background-color: red;
}

<!-- normal page -->
<div>
  <div class="container">
    &nbsp;
  </div>
</div>

<p>&nbsp;</p>

<!-- single post post page -->
<div class="single-post">
  <div class="container">
    &nbsp;
  </div>
</div>