CSS 规则排除父类

Question

我如何编写一个 CSS 规则来选择所有div.box不在其中的内容.container？

以下代码片段不起作用div，.container因为div.container.

div:not(.container) .box {
   background:red;
}

<div class="box">box</div> <!-- select this -->
<div class="container">
    <div>txt</div>
    <div><div class="box">box</div></div>
</div>
<div class="box">box</div> <!-- select this -->

Answer 1

如果您不想覆盖每个属性，我看到的唯一方法是为特定容器内的框提供一个附加类。

.box:not(.exclude) {
  background: red;
}

<div class="box">box</div> <!-- select this -->
<div class="container">
    <div>txt</div>
    <div><div class="box exclude">box</div></div>
</div>
<div class="box">box</div> <!-- select this -->

Answer 2

在某种程度上，您要求的 CSS 规则有点倒退。您应该从最通用的规则开始，然后添加更具体的规则。对于您的情况，您应该执行如下操作：

/* Generic Box styles */
.box
{
  border: 1px solid black;
}

/* Boxes in a container */
.container .box
{
  color: blue;
}

<div class="box">Generic Box</div>
<div class="container">
  <div class="box">I'm in a container</div>
</div>