是否可能仅使用CSS选择元素的最后一个绝对子孙节点?

10 浏览
0 Comments

是否可能仅使用CSS选择元素的最后一个绝对子孙节点?

使用.a .b:last-child .c:last-child在这种情况下不起作用,因为最后一个空的div.b

0
0 Comments

这个问题的出现原因是因为用户想要通过CSS选择器选择一个元素的最后一个子孙元素。然而,目前并没有一种CSS选择器可以直接选择前一个元素中的下一个兄弟元素(查看是否为空)。虽然:empty伪类可以帮助判断一个元素是否为空,但在这种情况下并不适用。需要注意的是,包含空格的元素不被视为空。

另外,还有一个不太为人所知但非常有用的选择器是~,它可以选择在特定DOM元素之后的任何兄弟元素。与+类似,但~也会选择一个在中间有其他非.b元素(如br)的.b + .b元素。

用户创建了一个Codepen来探索方便的选择器,即使回答是“不,你不能这样做”:https://codepen.io/antoniandre/pen/jOOmKmq

虽然有一些逻辑和关系伪类选择器正在草案中,但这仍然是不行的,至少目前不能在前一个元素选择器中向前查找并使用。用户提到的.a .b:nth-last-child(has( > .c)) .c:last-child可能会起作用,但不能在前一个元素选择器中使用。

0