如何选择li.node下不含.node类的最后一个li子元素？

我懂你的痛点——你在动态生成的树形HTML里，要精准选中所有.node类li元素的直接子ul中，最后一个不带.node类的li，之前用.node>ul>li:last-child不管用，因为这个选择器会误选中带.node的li（就像你示例里第一个.node下的ul最后一个li就是带.node的）。

正确的CSS选择器方案 #

你可以使用CSS的:nth-last-child()扩展语法，它能先筛选符合条件的元素，再取倒数第N个：

.node > ul > li:nth-last-child(1 of :not(.node)) {
  color: red;
}

为什么这个选择器有效？ #

• .node > ul：精准定位到.node类li的直接子ul元素
• li:nth-last-child(1 of :not(.node))：在当前ul的所有子li中，先筛选出不带.node类的li集合，再取这个集合里的最后一个（倒数第1个）

这样就能完美避开那些带.node的li，精准命中你需要的目标元素。

对应你的示例HTML验证 #

用这个选择器的话：

• 外层.node下的ul里，会选中第二个li（dededed）——它是不带.node的li中的最后一个
• 内层.node下的ul里，所有li都不带.node，所以会选中最后一个li（defefefe）

完全匹配你的需求。

内容的提问来源于stack exchange，提问作者user2542456