html - 是否有 CSS 选择器来排除特定分支？

Question

不好意思标题没有特别说明，我的意思如下

我想用第二个 CSS 选择器实现的是“所有 b 类元素都是 a 类元素的后代，但不是 c 类元素的后代”。如您所见，我编写的选择器实际上选择了所有 b 类元素，无论它们是否是 c 类元素的后代。 (即我希望中央 div 显示为蓝色而不是红色)。为什么我的选择器不起作用？

考虑以下代码:

div {
  background: blue;
  border: 1px solid;
  margin: 20px;
  min-height: 20px;
  max-width: 300px;
}

.a :not(.c) .b {
  background: red;
}

<div class="a">
  <div>
    <div class="b">
      <div>
        <div class="c">
          <div>
            <div class="b">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

至少对于这种情况，你可以反过来做。强制更具体的情况 (.a .c .b) 为蓝色并将 .a .b 设置为红色 - 它会被更具体的情况否决。

div {
  background: blue;
  border: 1px solid;
  margin: 20px;
  min-height: 20px;
  max-width: 300px;
}

.a .c .b {
  background: blue;
  }
  
  .a .b {
    background: red;
    }

<div class="a">
  <div>
    <div class="b">
      <div>
        <div class="c">
          <div>
            <div class="b">innermost b
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>