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

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

如果我正确理解了您的问题，则希望将s中的最后一个

li

标记作为目标

ul

，其中s中的嵌套级别数

ul

是不可预测的。

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

[选择器2.1] 或选择器3] 似乎无法做到这一点。

的

:last-child

，

:last-of-type

而

nth-child

当嵌套级别是固定的伪类的工作。在动态环境中，有多个嵌套级别不同的列表，这些选择器规则将中断。

这将选择

li

第一级中的最后一个

ul

：

div.case > ul > li:last-child

这将选择

li

第二个级别中的最后一个

ul

：

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

这将选择

li

第三级中的最后一个

ul

：

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

容器的嵌套级别，则可以将类应用于每个target

li

。

感谢@BoltClock协助制定Selectors 4规则（请参阅注释）。