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

问题描述

我有一堆DIV元素在我的HTML，其中几个的类属性设置为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.

可以这样做吗？

推荐答案

c $ c> .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屋！