使用 CSS 选择递归 div 布局中的最后一个 div答案

【问题标题】：Select with CSS the last div in recursive div layout使用 CSS 选择递归 div 布局中的最后一个 div
【发布时间】：2012-08-05 03:28:23
【问题描述】：

使用下面的 HTML，我如何选择 DIV depper（没有子级）？

我认为我可以使用 nth-last-child 但不起作用，因为所有 div 都有最后一个（也是第一个）！ :D

PD：不能更深地在 DIV 中使用 ID 或 CLASS 属性（因为它们是 Web 中存在的 HTML 文件）

HTML：

<div class="base">
    <div>
        <div>
            <div>
                <div>
                    <!-- recursive divs (quantity not defined...) -->
                </div>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

标签： css recursion css-selectors

【解决方案1】：

很遗憾，CSS 选择器无法查看父元素，因此您无法看到哪些元素没有 divs 作为子元素。

如果你使用 jQuery，你可以这样做来查找元素：

$('.base :not(:has(*))').addClass('deepest');

演示：http://jsfiddle.net/EhZax/

【讨论】：

Way way way way 更快：jsperf.com/jquery-filter-vs-complex-selector

【解决方案2】：

您必须使用 Javascript。这是一个使用 jQuery 的示例：

$('.base *').filter(function(){
    return ! $(this).find('> *').length;
});

在此处查看实际操作：http://jsfiddle.net/E6sec/

更新：如果您愿意，您可以创建自己的 :sterile 选择器。这是一个例子：

jQuery.expr[':'].sterile = function(el) {
    return ! el.children.length;
};

然后您可以像使用任何其他伪选择器一样使用它：

$('.base :sterile');

这是小提琴：http://jsfiddle.net/FBw5q/

P.S.自从it's way faster than any of jQuery's methods 以来，我一直使用原生的el.children。但是，IE children。如果您对此感到担忧，您可以使用 jQuery 的 children() 方法。

【讨论】：

我觉得你可以再浓缩一点到$('.base *').filter(function() { return $(this).children().length == 0; });。
@Blender - 谢谢。更新。奇怪的是，find('> *') 比 children() 快。
@Blender - 有趣。 Chrome 和 Opera 使用find 性能更好，而 IE、Firefox 和 Safari 使用children 性能更好。很奇怪。
JQuery @JosephSilber, Blender 的有趣应用。
@Blender 在 CSS4（或者可能是 5？）中应该是一个选择器伪类，如 :sterile 或类似的东西？我们如何建议这个？

【解决方案3】：

为此，您需要 Javascript。仅使用 CSS 是不可能的

【讨论】：