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的子元素。这意味着上面的代码不应使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;
}

具有CSS的多个子代子选择器

3 个答案: