如何在CSS中*仅*选择最高级别的后代？

Question

考虑这个例子，a、b、c、d 只是随机标签。标有 class="select" 的 d 标签是我想要选择的。当然，我没有关于它们的课程。

规则应该是：仅选择出现的最高级别后代，因此从最外层到最内层 - d 标签第一次出现时。

<container>
  <a>
    <b>
      <a>
        <c><d class="select"></d></c>
      </a>
    </b>
  </a>
  <a>
    <d class="select">
      <a>
        <c><d><a><d></d></a></d></c>
      </a>
    </d>
  </a>
</container>

这可以在 CSS 中完成吗？

Answer 1

不幸的是，仅靠 CSS 是不可能做到这一点的。

CSS 不允许您直接检测 DOM 中节点的层次结构并访问该层次结构中元素的第一次出现。您只能根据 DOM 中元素的相对位置进行选择。