CSS选择器获取HTML树中特定类的最深元素 [英] CSS selector to get deepest element of specific class in the HTML tree

问题描述

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

I've got a a bunch of DIV elements in my HTML, several of which have their class attribute set to "rowsLayout". Some of these rowsLayout DIVs can be nested inside one another. I want to define a CSS selector that only targets the deepest DIVs in those nestings. That is, I don't want any of the rowsLayout DIVs that contain any other rowLayout DIVs.

<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 为目标的选择器.

With this structure, I want a selector that will target b, d, and e.

这个可以吗?

推荐答案

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

You can use the jQuery selector .rowsLayout:not(:has(.rowsLayout)).

但是，出于性能原因，这在 CSS 中是不可能的.

However, for performance reasons, this is not possible in CSS.

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

Your selector depends on the children (or lack thereof) of the elements that you target.
CSS is designed so that an element's selectors can always be resolved before the element's children exist; this allows CSS to be applied as a document loads.

这篇关于CSS选择器获取HTML树中特定类的最深元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！