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)" )：选择包含至少一个与指定选择器匹配的元素的元素。

结果显示：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

那将是ul .active .active .active li span。

根据this回答，您无法动态选择它。

使用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);
    }
});

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

2 个答案:

说明

结果显示：