<分区>
html - 未知级别 ul 中最后一个 ul 的 Css 选择器
我试图只选择图片中带下划线的最后一个 child 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>最佳答案
遗憾的是，这无法通过 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>关于html - 未知级别 ul 中最后一个 ul 的 Css 选择器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57040332/