li:nth-last-child(1)不生效是因为它要求目标元素必须是父元素倒数第一个子节点且类型为li,而HTML注释、文本节点或混排标签会干扰序号计算;应优先使用li:nth-last-of-type(1)确保匹配所有li中最后一个。

nth-last-child 能从末尾选中列表元素,但前提是目标元素必须恰好位于父元素倒数第 n 个子节点位置,且类型匹配——它不跳过其他标签,也不管视觉顺序。
为什么 li:nth-last-child(1) 有时不生效
常见现象:写好了 li:nth-last-child(1),最后一个 li 却没变色。根本原因不是 CSS 写错了,而是 DOM 结构里混入了干扰节点。
- 父容器中存在
<div>、<code><p></p>、HTML 注释<!-- -->或空格文本节点,它们都会被计入子节点总数 - 比如
<ul> <li>A</li> <li>B</li> <!-- note --><li>C</li> </ul>,此时C是倒数第1个子节点,B反而是倒数第3个 - 浏览器开发者工具的 Elements 面板里右键 → «Break on» → «Subtree modifications» 可观察真实子节点构成
-
li:nth-last-child(2):只匹配倒数第二个子节点,且该节点必须是li -
li:nth-last-of-type(2):在所有li中倒数第二个,不管中间夹了多少其他标签 -
nth-last-of-type在 IE9+、所有现代浏览器都支持,但 IE8 不支持;若需兼容 IE8,只能靠 JS 或结构调整 - 当父容器结构固定、子元素类型单一(如纯
ul > li),nth-last-child更轻量;否则语义更稳的是nth-last-of-type -
li:nth-last-child(1)等价于li:last-child,选最后一个li(且它得是父元素最后一个子节点) -
li:nth-last-child(-n+3)表示倒数第 1、2、3 个子节点 —— 仅当这三处都是li才全部命中 -
li:nth-last-child(2n)匹配倒数第 2、4、6… 个子节点(即倒数偶数位),不是“最后两个” - 别写
nth-last-child(n-1)或nth-last-child(-n-1),b为负会导致第一个有效位置为负数,规则直接失效
nth-last-child 和 nth-last-of-type 到底用哪个
如果你的目标是“倒数第 N 个 li”,而不是“倒数第 N 个子节点且恰好是 li”,那应该优先用 li:nth-last-of-type(n)。
常用表达式怎么写才不出错
参数不是随便填的数字,an+b 里的 b 必须是非负整数,n 从 0 开始代入计算。
立即学习“前端免费学习笔记(深入)”;
真正容易被忽略的是:这个选择器完全依赖静态 DOM 位置,对 display: none、visibility: hidden 或 JS 动态增删毫无反应。如果列表内容频繁变动,或末尾元素可能被隐藏,靠 CSS 伪类定位就不够可靠——这时该让 JS 拿 parent.children 或 querySelectorAll 实时判断再加 class。


















