如何编写适配所有场景的CSS :not()排除选择器？

我尝试用以下CSS规则，想在存在指定父类时排除部分样式：

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

但这个规则无法适配所有嵌套场景，比如下面的代码示例：

现有代码 #

CSS

.item {
  color: green;
}

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

HTML

<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>

问题出在：嵌套在.toto下的.cc-ei内的<li>会被错误地设为红色，因为原选择器只检查了<li>的直接父级<div>是否不是.cc-ei，忽略了上层嵌套的.cc-ei。

解决方案 #

最兼容且直观的方法是先设置基础样式，再针对需要排除的区域覆盖样式：

/* 给.cc下所有<li>设置红色 */
.cc li {
  color: red;
}

/* 覆盖.cc内所有.cc-ei后代的<li>，恢复原有颜色（或指定目标颜色） */
.cc .cc-ei li {
  color: inherit;
}

如果需要直接指定颜色而非继承，也可以写成：

.cc .cc-ei li {
  color: green;
}

这种写法不依赖任何新特性，所有浏览器都能正常工作，不管<li>在.cc-ei内嵌套多少层，都会被正确排除。

如果你的项目只需要兼容现代浏览器（Chrome 105+、Firefox 121+等），也可以用:has()选择器实现单一规则：

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

但这种方法兼容性不如前者，需根据实际场景选择。

内容的提问来源于stack exchange，提问作者user1760319