用CSS選擇遞歸div佈局中的最後一個div

用下面的HTML 我該如何選擇DIV depper（它沒有子節點）？用CSS選擇遞歸div佈局中的最後一個div

我認爲我可以使用nth-last-child但不工作，因爲所有的div都有最後一個（也是第一個）！：d

PD：不是有可能在DIV使用ID或類屬性的更深層次的（因爲它們是在網頁HTML存在的文件）

HTML：

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

來源

2012-07-16 lcoronelp

您需要Javascript的。這不可能與CSS只有

來源

2012-07-16 23:14:25

你必須使用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/

附：我使用了原生el.children，因爲it's way faster than any of jQuery's methods。但是，IE < 9將包含評論children。如果你擔心，你可以使用jQuery的children()方法。

來源

2012-07-16 23:17:03

我想你可以把它凝結多一點'$（「基地*」）.filter（function（）{return $（this）.children（）。length == 0;}）;'。 – Blender 2012-07-16 23:22:51

@Blender - 謝謝。更新。奇怪的是，find（'> *'）'比'children（）'快。 – 2012-07-16 23:25:00

真的嗎？我永遠不會猜到... – Blender 2012-07-16 23:25:26

不幸的是，CSS選擇器無法查看父元素，因此您無法看到哪些元素沒有div s作爲子元素。

如果您正在使用jQuery，你可以做到這一點找到元素：

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

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

來源

2012-07-16 23:19:22 Blender

+1比我的解決方案簡潔得多...... – 2012-07-16 23:20:41

+1因爲你的方式可能會更快。 – Blender 2012-07-16 23:21:46

方式*方式* **方式** ***方式***更快：http://jsperf.com/jquery-filter-vs-complex-selector – 2012-07-16 23:37:46

用CSS選擇遞歸div佈局中的最後一個div

回答

相關問題