html - 如何选择最深层次的使用一个CSS类？

Question

如何选择一个css类的最深用途？

在下面的列表中，我如何选择最深的使用类.active , 在这种情况下是 <li>包装 <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>

Answer 1

您可以像下面这样使用 jQuery :not 和 :has 选择器来选择最深的事件 li:

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

解释

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

jQuery( ":has(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>