CSS还是jQuery解决方案来选择"last in hierarchy"元素？

Question

我有一堆嵌套的HTML元素，比如

<div>
   <div>
      <div>A</div>
   </div>
   <div>
      <div><span>B</span></div>
   </div>
</div>

有没有办法只选择最里面的div，那些不包含任何其他div的div？请注意，div B确实有子体，但没有其他div。

澄清我的意思是选择所有不包含另一个div，但可能包含一些其他标签的div。

Answer 1

有没有办法只选择最里面的div，那些不包含任何其他div的div？

您可以组合:not()/:has()选择器，以选择不包含其他div元素的最里面的div元素：

$('div:not(:has(div))');

给定您提供的HTML，如果您不希望选择带有"A"文本节点的div，则只能选择包含其他元素的元素，在本例中为span:

此处示例

$('div:not(:has(div)):has(*)');

Answer 2

可以执行以下操作：

$('div').not(':has(div)').css('color','red')

解释是模棱两可的，虽然不是100%清楚这是预期的结果

DEMO