未知级别ul中最后一个ul的CSS选择器

Question

我试图仅选择图片中带下划线的最后一个孩子ul

代码

li:before {
  content: ' ';
}

<div id="container">
  <ul>
    <li>
      <ul>
        <li>123</li>
        <li>
          <ul>
            <li>Abc !</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <ul>
        <li>
          <ul>
            <li>
              <ul>
                <li>
                  <ul>
                    <li>Def !</li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>456</li>
            <li>
              <ul>
                <li>
                  <ul>
                    <li>Ghi !</li>
                    <li>Jkl !</li>
                    <li>Mno !</li>
                  </ul>
                </li>
                <li>789</li>
              </ul>
            </li>
            <li>
              <ul>
                <li>
                  <ul>
                    <li>
                      <ul>
                        <li>Prs !</li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li>1011</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

遗憾的是，使用CSS无法动态实现。但是，可以使用jQuery通过过滤没有ul后代的每个ul来实现。

$(document).ready(function(){
  $('ul').filter(":not(:has(ul))").addClass('last');
});

.last {
  background:blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    level 1
    <ul>
      <li>level 2</li>
      <li>level 2</li>
      <li>level 2</li>
      <li>
        level 2
        <ul>
          <li>level 3</li>
          <li>level 3</li>
          <li>
            level 3
            <ul>
              <li>level 4</li>
              <li>level 4</li>
              <li>level 4</li>
              <li>level 4</li>
            </ul>
          </li>
          <li>level 3</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>level 1</li>
  <li>
    level 1
    <ul>
      <li>level 2</li>
      <li>level 2</li>
      <li>level 2</li>
      <li>level 2</li>
    </ul>
  </li>
  <li>level 1</li>
</ul>

Answer 2

没有可能的纯CSS方法可以做到这一点。

编辑

使用CSS Selector Level 4可以很容易：ul:not(:has(ul)) 您可以使用jQuery，它支持:has()选择器。

jQuery('ul:not(:has(ul))').addClass('deep')

这是VanillaJS解决方案：

"use strict";
console.clear()

{
  const container = document.getElementById('container')
  
  // Get all list items inside #container
  let uls = Array.from(container.getElementsByTagName('ul'));
  
  uls = uls.filter(ul => {
    return ul.getElementsByTagName('ul').length === 0
  })
  
  // Add a class to those list items
  uls.forEach(ul => ul.classList.add('deep'))
  
}

.deep {
  border: 1px solid;
  background-color: rgba(255, 0, 0, 0.2);
}

li:before {
  content: ' ';
}

<div id="container">
  <ul>
    <li>
      <ul>
        <li>123</li>
        <li>
          <ul>
            <li>Abc !</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <ul>
        <li>
          <ul>
            <li>
              <ul>
                <li>
                  <ul>
                    <li>Def !</li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>456</li>
            <li>
              <ul>
                <li>
                  <ul>
                    <li>Ghi !</li>
                    <li>Jkl !</li>
                    <li>Mno !</li>
                  </ul>
                </li>
                <li>789</li>
              </ul>
            </li>
            <li>
              <ul>
                <li>
                  <ul>
                    <li>
                      <ul>
                        <li>Prs !</li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li>1011</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

---

以下是错误的答案，因为我误读了OP 您可以使用一些JavaScript：

"use strict";
console.clear()

{
  const container = document.getElementById('container')
  
  // Get all list items inside #container
  let lis = Array.from(container.getElementsByTagName('li'));

  // Filter to get only those, that don't have child lists
  lis = lis.filter(el => {
    return el.querySelectorAll(':scope > ul').length === 0
  })
  // Filter again to get only those, that are last childs
  lis = lis.filter(el => {
    return el.parentElement.lastElementChild === el
  })
  
  // Add a class to those list items
  lis.forEach(el => el.parentElement.classList.add('deep'))
  
}

.deep {
  border: 1px solid;
  background-color: rgba(255, 0, 0, 0.2);
}

li:before {
  content: ' ';
}

<div id="container">
  <ul>
    <li>
      <ul>
        <li>123</li>
        <li>
          <ul>
            <li>Abc !</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <ul>
        <li>
          <ul>
            <li>
              <ul>
                <li>
                  <ul>
                    <li>Def !</li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>456</li>
            <li>
              <ul>
                <li>
                  <ul>
                    <li>Ghi !</li>
                    <li>Jkl !</li>
                    <li>Mno !</li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <ul>
                <li>
                  <ul>
                    <li>
                      <ul>
                        <li>Prs !</li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>