带有css的多个后代子选择器[重复]答案

【问题标题】：Multiple descendant children selector with css [duplicate]带有css的多个后代子选择器[重复]
【发布时间】：2023-03-24 20:34:01
【问题描述】：

检查以下代码：

.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 字变成红色，但无论如何它都会变成红色。我做错了什么？

【问题讨论】：

标签： css css-selectors

【解决方案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>

【讨论】：

我非常喜欢你的想法。但是为什么.aaa div:not(.bbb) .ccc 不起作用？正如你所说，我试着更具体一些，但看起来这还不够。我无法访问 HTML 代码，只能访问 CSS 文件。
因为还有其他的 div 没有.bbb。
我不确定这是否适用于所有情况，因为如果您删除带有 zzz bbb 类的 div，您将不会选择 ccc ...您的选择器就像 @987654331 @，您在 aaa 和 ccc 之间引入了一个随机选择器，使选择变得不可能
@Ori Drori 非常感谢，您的解决方案确实非常好，但它需要更改 HTML 代码，这在我的情况下是不可能的。但我非常喜欢你的解决方案，谢谢！ Temani Afif 你是对的 :)

【解决方案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>

【讨论】：

我非常喜欢您的解决方案，效果很好！它像手套一样适合我的箱子，谢谢我的朋友。

【解决方案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;
}

【讨论】：

感谢您的关注，您的解决方案也有效，但 Temani Afif 重置了 css 样式（我不知道最初的样式）并且效果更好。不过非常感谢！