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

如何选择CSS中最后一个也是最深的元素

有没有办法改进这个css代码

对于一棵大树，你提出了什么解决方案？（~15-25）

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

/*级别1*/
div.case>ul:last child>li.leaf:last child>div{
字体大小：粗体；
背景：红色；
}
/*二级*/
div.case>ul:last child>li.expanded:last child>ul>li.leaf:last child{
字体大小：粗体；
背景：蓝色；
}
/*三级*/
div.case>ul:last child>li.expanded:last child>ul>li.expanded:last child>ul>li.leaf:last child{
字体大小：粗体；
背景：绿色；
}
/*四级*/
div.case>ul:last child>li.展开：last child>ul>li.展开：last child>ul>li.展开：last child>ul>li.叶：last child{
字体大小：粗体；
背景：黄色；
}

案例0


1.内容


1.内容


2.内容




2.内容


1.内容


1.内容


2.内容






3.内容（粗体）


案例1


1.内容


1.内容


2.内容




2.内容


1.内容


1.内容


2.内容






3.内容


1.内容


2.内容


3.内容（粗体）




案例2


1.内容


1.内容


2.内容




2.内容


1.内容


2.内容


3.内容




3.内容


1.内容a


1.内容


2.内容（粗体）






案例3


1.内容


1.内容


2.内容




2.内容


1.内容


1.内容


2.内容






3.内容


2.内容


1.内容


1.内容


2.内容（粗体）








案例4


1.内容


1.内容


2.内容




2.内容


2.内容


1.内容


1.内容


2.内容








3.内容


1.内容


1.内容


2.内容（粗体）






案例5


内容1


内容2


内容3（粗体）

如果我正确理解您的问题，您希望以多个

ul

s中的最后一个

li

标记为目标，其中

ul

s中的嵌套级别数是不可预测的

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

使用或似乎不可能做到这一点

嵌套级别固定时，

：last child

、

：last of type

和

nth child

伪类工作。在动态环境中，存在多个不同嵌套级别的列表，这些选择器

div.case > ul > li:last-child

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

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

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