选择各种嵌套容器中的最后一个元素

Question

如何选择CSS中最后和最深的元素？

有没有办法改善这个CSS代码？

你为深树提出了什么解决方案？ （〜15-25）。

我在避免使用javascript。 但SASS解决方案是受欢迎的。（可能使用@for？）

 /*level 1*/ div.case > ul:last-child > li.leaf:last-child > div { font-weight: bold; background: red; } /*level 2*/ div.case > ul:last-child > li.expanded:last-child > ul > li.leaf:last-child { font-weight: bold; background: blue; } /*level 3*/ div.case > ul:last-child > li.expanded:last-child > ul > li.expanded:last-child > ul > li.leaf:last-child { font-weight: bold; background: green; } /*level 4*/ div.case > ul:last-child > li.expanded:last-child > ul > li.expanded:last-child > ul > li.expanded:last-child > ul > li.leaf:last-child { font-weight: bold; background: yellow; } 

 <div class="case"> <h1>Case 0</h1> <ul> <li class="expanded"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> <li class="expanded"> <div>2. content</div> <ul> <li class="leaf"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> </ul> </li> <li class="leaf"> <div>3. content (bold)</div> </li> </ul> </div> <div class="case"> <h1>Case 1</h1> <ul> <li class="expanded"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> <li class="expanded"> <div>2. content</div> <ul> <li class="leaf"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> </ul> </li> <li class="expanded"> <div>3. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> <li class="leaf"> <div>3. content (bold)</div> </li> </ul> </li> </ul> </div> <div class="case"> <h1>Case 2</h1> <ul> <li class="expanded"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> <li class="leaf"> <div>2. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> <li class="leaf"> <div>3. content</div> </li> </ul> </li> <li class="expanded"> <div>3. content</div> <ul> <li class="expanded"> <div>1. content a</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content (bold)</div> </li> </ul> </li> </ul> </li> </ul> </div> <div class="case"> <h1>Case 3</h1> <ul> <li class="expanded"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> <li class="expanded"> <div>2. content</div> <ul> <li class="leaf"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> </ul> </li> <li class="expanded"> <div>3. content</div> <ul> <li class="expanded"> <div>2. content</div> <ul> <li class="expanded"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content (bold)</div> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> <div class="case"> <h1>Case 4</h1> <ul> <li class="expanded"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> <li class="expanded"> <div>2. content</div> <ul> <li class="expanded"> <div>2. content</div> <ul> <li class="expanded"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content</div> </li> </ul> </li> </ul> </li> </ul> </li> <li class="expanded"> <div>3. content</div> <ul> <li class="expanded"> <div>1. content</div> <ul> <li class="leaf"> <div>1. content</div> </li> <li class="leaf"> <div>2. content(bold)</div> </li> </ul> </li> </ul> </li> </ul> </div> <div class="case"> <h1>Case 5</h1> <ul> <li class="leaf"> <div>content 1</div> </li> <li class="leaf"> <div>content 2</div> </li> <li class="leaf"> <div>content 3(bold)</div> </li> </ul> </div> 

Answer 1

如果我没有理解你的问题，你要定位的最后li多标签ul s，其中嵌套级别的数目ul s是不可预知的。

您需要一个选择器，该选择器以包含块中“最后和最深元素”为目标，其中块中前面的元素数量是未知且不相关的。

选择器2.1或选择器3似乎无法实现这一点。

:last-child ， :last-of-type和nth-child伪类在嵌套级别修复时起作用。 在动态环境中，有多个不同嵌套级别的列表，这些选择器规则将会中断。

这将选择第一级ul的最后一个li ：

div.case > ul > li:last-child

这将选择第二级ul的最后一个li ：

div.case > ul > li:last-child > ul > li:last-child

这将选择第三级ul的最后一个li ：

div.case > ul > li:last-child > ul > li:last-child > ul > li:last-child

等等...

但是， 选择器4中可能存在一个解决方案，浏览器尚未实现：

li:last-child:not(:has(> li))

该规则针对最后一个孩子li有没有后代小号li s，这符合您的要求。

但是，现在，如果您知道每个ul容器的嵌套级别，则可以将类应用于每个目标li 。

^{感谢@BoltClock帮助制作Selectors 4规则（请参阅注释）。}