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

<分区>

检查下面的代码:

.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/56434403/

上一篇：html - 我无法获得链接到发送电子邮件的按钮

下一篇：html - 当浏览器变小时，响应式导航链接被推送到导航栏下方

相关文章：

css - 我可以使用 CSS 根据子元素数量应用样式吗？

css - 我可以使用 CSS 拥有多个背景图像吗？

javascript - 在 div 转换时修复 child 的位置

javascript - 在从 PHP 到 DIV HTML 之间传递变量

css - 在选择器中仅应用 css 规则文本而不是跨度

python - 查找并单击具有更改 CSS 选择器的元素 (python)

css - 使用 CSS 设计内部表格边框的交集

html - 使用 Bootstrap 导航

HTML & CSS : ">" Greater than selector styles not applied

css - 当类名 B 的另一个元素旁边时，按类名 A 选择元素