Html 如何选择CSS类的最深层次使用？

如何选择css类的最深层次使用

在下面的列表中，我如何选择类

.active

，在这种情况下是

包装
项目1.1.1



项目1


项目1.1


项目1.1.1

//此

项目1.1.1.1


第1.1.1.1.1项


项目1.1.1.1.2








项目1.2


项目1.2.1


项目1.2.1.1


第1.2.1.1.1项


项目1.2.1.1.2










这将是
ul.active.active.active li span


基于答案，您不能动态选择它

使用js/jQuery查找最深的节点：

var deepest = null;
var depth = 0;

$('ul .active li').each(function () {
    if ($(this).parents('.active').length > depth) {
        depth = $(this).parents('.active').length;
        deepest = $(this);
    }
});

您可以使用jQuery
：not
和
：has
选择器来选择最深的活动li：

$('li.active:not(:has(.active))')

解释
jQuery（“：not（选择器）”）
：选择与给定选择器不匹配的所有元素

jQuery（“：has（selector）”）
：选择至少包含一个与指定选择器匹配的元素的元素

结果表明：

$（'li.active:not（：has（.active）））.css（“边框”，“1px实心红色”）



项目1


项目1.1


项目1.1.1


项目1.1.1.1


第1.1.1.1.1项


项目1.1.1.1.2








项目1.2


项目1.2.1


项目1.2.1.1


第1.2.1.1.1项


项目1.2.1.1.2









对于深度，如果深度不是常量，则在CSS中不允许使用。你必须用javascript来做。只要指定的节点包含子节点，就可以对其进行迭代。最深的可能是层次链的任何级别。@ViniciusSantana好的，给你一个动态的方法来获得最深的类。@ViniciusSantana目前，纯html和css无法实现目标，也许有一天新的css版本会出现，然后我将更新我的答案：）我刚才提到的元素只是为了说明。最深的可能是层级链的任何级别。删除第一行，我将接受您的答案，即使在我的情况下，此元素是一个react组件，而jquery不是一个选项，但我明白了这个想法。@ViniciusSantana在您的问题中，您没有提到结构是动态的。另外，标签只是CSS和HTML。我问的问题是：如何选择CSS类的最深层次使用？
$('li.active:not(:has(.active))')