如何在具有未知内部节点数的多重递归结构中选择最后一级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>