如何编写适用于所有情况的 :not() CSS 排除？

Question

当定义了 CSS 类作为具有此规则的父级时，我尝试排除一些 CSS 规则：

.cc div:not(.cc-ei) li { color: red; }

但它并不适用于所有情况，正如您在下面的代码和链接的 Codepen 演示中看到的那样：

body {
  font: 700 16px/1.5 Arial;
}

.item {
  color: green;
}

.cc div:not(.cc-ei) li {
  color: red;
}

<div class="cc">
  <div>
    <ul>
      <li>Should be red</li>
    </ul>
  </div>

  <div class="cc-ei">
    <ul>
      <li class="item">Should be green</li>
    </ul>
  </div>

  <div class="toto">
    <div class="cc-ei">
      <ul>
        <li class="item">Should be green</li>
      </ul>
    </div>
  </div>
</div>

如何定义规则

.cc li { color: red; }

来排除

<li>

中的

<div class="cc-ei">

？

Answer 1

从逻辑上讲，您的选择器会在任何没有类的 div 中查找列表项。由于您的列表嵌套在多个 div 中，其中一个没有类，因此将被取代。您可以指定子关系（而不是一般的后代关系）以使其正常工作。

body {
  font: 700 16px/1.5 Arial;
}

.item {
  color: green;
}

.cc div:not(.cc-ei)>ul li {
  color: red;
}

<div class="cc">
  <div>
    <ul>
      <li>Should be red</li>
    </ul>
  </div>

  <div class="cc-ei">
    <ul>
      <li class="item">Should be green</li>
    </ul>
  </div>

  <div class="toto">
    <div class="cc-ei">
      <ul>
        <li class="item">Should be green</li>
      </ul>
    </div>
  </div>
</div>