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

Question

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

我认为我可以使用第n个最后一个孩子，但不起作用，因为所有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>

Answer 1

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

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

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

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

Answer 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.我使用了本机el.children，因为它比jQuery的任何方法都快。然而，IE<9将包括作为children的注释。如果这与您有关，您可以使用jQuery的children()方法。

Answer 3

您需要使用Javascript。只有CSS的是不可能的