如何选择CSS类的最深层用途? [英] How to select the deepest use of a CSS class?

问题描述

如何选择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="https://ajax.googleapis.com/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>

这篇关于如何选择CSS类的最深层用途?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！