CSS 选择器获取 HTML 树中特定类的最深元素

Question

我的 HTML 中有一堆 DIV 元素，其中一些元素的类属性设置为“rowsLayout”。其中一些 rowsLayout DIV 可以相互嵌套。我想定义一个 CSS 选择器，它只针对那些嵌套中最深的 DIV。也就是说，我不想要包含任何其他 rowLayout DIV 的任何 rowsLayout DIV。

<div id="a" class="rowsLayout">
  <div id="b" class="rowsLayout" />
  <div id="c" class="rowsLayout">
    <div id="d" class="rowsLayout" />
  </div>
</div>
<div id="e" class="rowsLayout" />

有了这个结构，我想要一个以 b、d 和 e 为目标的选择器。

这可以做到吗？

Answer 1

您可以使用 jQuery 选择器 .rowsLayout:not(:has(.rowsLayout))。

但是，出于性能原因，this is not possible in CSS .

您的选择器取决于您定位的元素的子级(或缺少子级)。
CSS 的设计使得元素的选择器总是可以在元素的子元素存在之前被解析；这允许在加载文档时应用 CSS。