标签 css css-selectors
<分区>
检查下面的代码:
.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 字变成红色，但它无论如何都会变成红色。我做错了什么？
最佳答案
实际上有些元素不是 .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>关于css - 带有CSS的多个后代子选择器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52481037/