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。

 < div id =aclass =rowsLayout> 
< div id =bclass =rowsLayout/> 
< div id =cclass =rowsLayout> 
< div id =dclass =rowsLayout/> 
< / div> 
< / div> 
< div id =eclass =rowsLayout/> 
  

对于这种结构，我想要一个以b，d和e为目标的选择器。 >

可以这样做吗？

解决方案

c $ c> .rowsLayout：not（：has（.rowsLayout））。

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

您的选择器取决于您定位的元素的子（或缺少）。

CSS的设计使得元素的选择器可以在元素的子元素存在之前解析;这允许CSS作为文档加载应用。

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" />

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

Can this be done?

解决方案

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

However, for performance reasons, this is not possible in 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屋！