当需从列表末尾开始计数选元素时，应使用:nth-last-child()；它按同级兄弟从后往前的位置匹配，不区分类型，而:nth-child()始终从首项正向计数。
什么时候该用 :nth-last-child() 而不是 :nth-child()
当你需要从列表末尾开始计数选元素时，:nth-last-child() 才是正确选择。比如「倒数第2个 li」或「最后3个按钮」——用 :nth-child() 会误选开头的元素，因为它永远从第一个子元素正向计数。
关键区别在于：它只看「同级兄弟中从后往前的位置」，不关心元素类型。如果父容器里混着 div、p、span，而你只想要倒数第n个 button，那得换 :nth-last-of-type()。
:nth-last-child() 的常见写法和陷阱
语法和 :nth-child() 一致，但方向相反。括号里可以是数字、关键词或公式，比如 2、odd、3n+1。注意：这里的 n 仍从0开始代入，只是结果位置是从末尾算起。
-
li:nth-last-child(2)→ 选所有li中，恰好是其父元素倒数第2个子元素的那个（不是倒数第2个li） -
li:nth-last-child(-n+3)→ 选最后3个子元素中是li的那些（即倒数第1、2、3个子元素，且它们刚好是li） - 错误写法：
li:nth-last-child(2n)想选倒数偶数位？其实它匹配的是「倒数第2、4、6…个子元素」，但前提是这些位置上的元素必须是li，否则不生效
想选“倒数第n个特定类型元素”怎么办
直接用 :nth-last-child() 很容易漏选——比如父元素是 <ul>
<li>A</li>
<div>xxx</div>
<li>B</li>
<li>C</li>
</ul>，那么 li:nth-last-child(2) 实际匹配的是 B（因为整个子元素列表倒数第2个是 li），而不是你直觉认为的倒数第2个 li（那是 C）。
这时必须用 :nth-last-of-type()：
li:nth-last-of-type(2) { color: red; }
它只在所有 li 兄弟中倒序编号，上面例子中会正确命中 B（倒数第2个 li），而 li:nth-last-child(2) 命中的是 B（巧合），换成 li:nth-last-child(1) 就会错过 C（因为倒数第1个子元素是 li，但倒数第1个 li 是 C）。
兼容性和实际调试建议
IE9+ 支持 :nth-last-child()，但 IE8 及更早版本完全不支持，且不支持任何 :nth-* 伪类。如果要兼容老环境，得靠 JS 或额外 class 控制。
调试时最容易卡在两点：
- 没看清父元素子节点的真实结构（用浏览器开发者工具的「Elements」面板展开看所有子节点，包括文本节点和注释节点——它们也算子元素！）
- 混淆了「第n个子元素」和「第n个某类型元素」，导致样式没生效却不报错
真正在意顺序逻辑时，先手写几个带明确索引的测试 HTML，再逐条验证 CSS 规则是否按预期命中——比查文档更快定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
