html - “Not a Descendant Of”的 CSS 表达式

Question

假设我有这个 HTML

.A {
  border: thick blue solid;
}

.B {
  border: medium red solid;
}

<div class="root">
  <div class="A">
    <div class="B">
      DON'T SELECT ME
    </div>
  </div>

  <div class="B">
    SELECT ME
  </div>

  <div class="A">
    <div class="C">
      <div class="B">
        ALSO DON'T SELECT ME
      </div>
    </div>
  </div>
</div>

例如，我如何将“SELECT ME”div 的背景设置为黄色，而不对其他两个这样做？我在想它应该是这样的：

.root>:not(.A) .B { background: yellow; }

...但这似乎不起作用，我不明白为什么；并且在网上搜索并没有让我感到震惊和惊讶。这是可以用 CSS 实现的吗？

Answer 1

.A {
  border: thick blue solid;
}

.B {
  border: medium red solid;
}

.root > .B {
  background-color: yellow;
}

.A > .B {
  background-color: green;
}

<div class="root">
  <div class="A">
    <div class="B">
      DON'T SELECT ME
    </div>
  </div>

  <div class="B">
    SELECT ME
  </div>

  <div class="A">
    <div class="C">
      <div class="B">
        ALSO DON'T SELECT ME
      </div>
    </div>
  </div>
</div>

将 .B 定位为 .root 的直接后代有效：

.root>.B { background: yellow; }

将 .B 定位为 .A 的直接后代将允许您以不同的方式定位 .A > .B 选择器：

.A>.B { background: green; }

Answer 2

您可以使用 CSS nth-child 规则。更多细节在这里

.B:nth-child(2) {
   background-color: yellow;
}

.A {
  border: thick blue solid;
}

.B {
  border: medium red solid;
}
.B:nth-child(2) {
   background-color: yellow;
}

<div class="root">
  <div class="A">
    <div class="B">
      DON'T SELECT ME
    </div>
  </div>

  <div class="B">
    SELECT ME
  </div>

  <div class="A">
    <div class="C">
      <div class="B">
        ALSO DON'T SELECT ME
      </div>
    </div>
  </div>
</div>