jquery - 如何在内部节点数未知的多重递归结构中选择最后一层 li？

Question

我需要选择片段所示结构中的最后一级子元素。 如果我们可以使用 css 实现这一点，那就太好了，但如果不可能，jquery 也可以。

注意:我无法更改 HTML 结构或在其中添加类。

ul li:last-child {
        color: #ff0000;
    }

    li {
        color: #000000;
    }

<ul class="root">
   <li>no</li>
   <li>no</li>
   <li>yes</li>
</ul>
<ul class="root">
   <li>no</li>
   <li>no</li>
   <li>
      <ul>
         <li>no</li>
         <li>
            yes
            <ul>
               <li>no</li>
               <li>
                  yes
                  <ul>
                     <li>no</li>
                     <li>
                        yes
                        <ul>
                           <li>no</li>
                           <li>
                              yes
                              <ul>
                                 <li>no</li>
                                 <li>The last one, Only this need to be red!</li>
                              </ul>
                           </li>
                        </ul>
                     </li>
                  </ul>
               </li>
            </ul>
         </li>
      </ul>
   </li>
</ul>

Answer 1

在 :has() 之前您将需要使用 JS支持。

这是获得最深度的一种方法 <li>并向其添加一个类:

var items = document.querySelectorAll("li");

items[items.length - 1].classList.add("last");

.last {
  color: red;
}

<ul class="root">
   <li>no</li>
   <li>no</li>
   <li>yes</li>
</ul>
<ul class="root">
   <li>no</li>
   <li>no</li>
   <li>
      <ul>
         <li>no</li>
         <li>
            yes
            <ul>
               <li>no</li>
               <li>
                  yes
                  <ul>
                     <li>no</li>
                     <li>
                        yes
                        <ul>
                           <li>no</li>
                           <li>
                              yes
                              <ul>
                                 <li>no</li>
                                 <li>The last one, Only this need to be red!</li>
                              </ul>
                           </li>
                        </ul>
                     </li>
                  </ul>
               </li>
            </ul>
         </li>
      </ul>
   </li>
</ul>