带有 css 的多个后代子选择器

Question

检查下面的代码：

.aaa :not(.bbb) .ccc {
font-size: 20px;
color: #FF0000;
}

<div class="aaa">
<div>
<div>
<div class="bbb">
<div>
<div>
<div class="ccc">AQUI</div>
</div>
</div>
</div>
</div>
</div>
</div>

我想匹配所有.ccc元素，这些元素是.aaa的孩子，但不是.bbb的孩子。这意味着上面的代码不应该使 AQUI 单词变为红色，但无论如何它都会变成红色。我做错了什么？

Answer 1

实际上有些元素没有.bbb- 在这种情况下，.bbb之前和之后的两个div。为此，您需要更具体。您可以添加另一个类(示例中zzz(，如果此类未与.bbb结合使用，则将应用该规则。

.aaa .zzz:not(.bbb) .ccc {
font-size: 20px;
color: #FF0000;
}

<div class="aaa">
<div>
<div>
<div class="zzz bbb">
<div>
<div>
<div class="ccc">AQUI</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 2

not(.bbb)将匹配任何没有类.bbb的div，并且在.aaa和.ccc之间有很多，这就是为什么文本是红色的。要做你想做的事，你需要考虑两个选择器

.aaa .ccc {
font-size: 20px;
color: #FF0000;
}
/*we reset the style if children of .bbb*/
.bbb .ccc {
color: initial;
font-size:initial;
}

<div class="aaa">
<div>
<div>
<div class="bbb">
<div>
<div>
<div class="ccc">AQUI</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 3

您忽略了.ccc是与:not(.bbb)匹配的组件的子项：

<div class="aaa">
<div class="ccc"></div>
<div class="bbb">
<div> // <-- :not(.bbb)
<div class="ccc"></div>
</div>
</div>
</div>

您需要编写两个规则：

.aaa .ccc {
color: blue;
}
.aaa .bbb .ccc {
color: red;
}