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

我的 HTML 中有一堆 DIV 元素，其中几个元素的 class 属性设置为“rowsLayout”。其中一些 rowsLayout DIV 可以相互嵌套。我想定义一个 CSS 选择器，仅针对这些嵌套中最深的 DIV。也就是说，我don't想要包含任何其他 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 为目标的选择器。

这可以做到吗？

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

然而，出于性能原因，这在 CSS 中是不可能的 http://snook.ca/archives/html_and_css/css-parent-selectors.

您的选择器取决于children（或缺乏）您的目标元素。
CSS 的设计使得元素的选择器始终可以在元素的子元素存在之前解析；这允许在文档加载时应用 CSS。