如何选择CSS类的最深层用途?

本文介绍了如何选择CSS类的最深层用途?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

如何选择CSS类的最深用途?

How to select the deepest use of a css class?

在下面的列表中，我如何选择对类 .active 的最深入的使用，在这种情况下，是< li> 包装<span> Item 1.1.1.1</span> ?

In the following list, how do I select the deepest use of the class .active, in this case been the <li> wrapping <span>Item 1.1.1.1</span>?

<ul> <li class="active"> <span>Item 1</span> <ul> <li class="active"> <span>Item 1.1</span> <ul> <li> <span>Item 1.1.1</span> <ul> <li class="active"> // need selector for this <li> <span>Item 1.1.1.1</span> <ul> <li> <span>Item 1.1.1.1.1</span> </li> <li> <span>Item 1.1.1.1.2</span> </li> </ul> </li> </ul> </li> </ul> </li> <li> <span>Item 1.2</span> <ul> <li> <span>Item 1.2.1</span> <ul> <li> <span>Item 1.2.1.1</span> <ul> <li> <span>Item 1.2.1.1.1</span> </li> <li> <span>Item 1.2.1.1.2</span> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <ul>

推荐答案

您可以使用jQuery :not 和:has 选择器(如下所示)来选择最深的活动li:

You could use jQuery :not and :has selectors like below to select the deepest active li:

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

说明

jQuery(:not(selector)"):选择与给定选择器不匹配的所有元素.

Explanation

jQuery( ":not(selector)" ): Selects all elements that do not match the given selector.

jQuery(:has(selector)"):选择包含至少一个与指定选择器匹配的元素的元素.

jQuery( ":has(selector)" ): Selects elements which contain at least one element that matches the specified selector.

$('li.active:not(:has(.active))').css("border", "1px solid red");

<script src="ajax.googleapis/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="active"> <span>Item 1</span> <ul> <li class="active"> <span>Item 1.1</span> <ul> <li> <span>Item 1.1.1</span> <ul> <li class="active"> <span>Item 1.1.1.1</span> <ul> <li> <span>Item 1.1.1.1.1</span> </li> <li> <span>Item 1.1.1.1.2</span> </li> </ul> </li> </ul> </li> </ul> </li> <li> <span>Item 1.2</span> <ul> <li> <span>Item 1.2.1</span> <ul> <li> <span>Item 1.2.1.1</span> <ul> <li> <span>Item 1.2.1.1.1</span> </li> <li> <span>Item 1.2.1.1.2</span> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <ul>