倒数第n个子元素用:nth-last-child(n)，它从父元素末尾向前计数所有子元素位置，不区分类型；若需仅针对某类元素倒序匹配，应使用:nth-last-of-type(n)。
倒数第 n 个子元素怎么选？:nth-last-child(n) 的基本写法
直接用 :nth-last-child(n) 就能从末尾往前数，选中第 n 个子元素。它和 :nth-child(n) 方向相反，但匹配逻辑一样：只看元素在父容器中的位置，不关心类型或内容。
比如想选列表里倒数第二个 <li>，写成：
li:nth-last-child(2) { color: red; }
- 注意：这里的
2是“倒数第 2 个”，不是“索引为 2”（CSS 里没索引 0 的概念） - 如果父元素末尾有非
<li>元素（比如<div> 或注释节点），<code>:nth-last-child(2)可能匹配不到任何<li>—— 因为它数的是所有子元素，不是仅<li> - 支持表达式写法，如
:nth-last-child(3n+1)表示倒数第 1、4、7… 个子元素
:nth-last-child 和 :nth-last-of-type 到底该用哪个？
关键区别在于是否“跳过其他类型”。如果你的列表结构干净（全是 <li>），两者效果一致；但一旦混入其他标签（比如 <li> 后跟 <footer></footer>），结果就不同了。
假设 HTML 是：
- A
- B
- C
-
li:nth-last-child(2)→ 不生效：因为倒数第 2 个子元素是<li>C</li>，但它在父级中是第 3 个子元素，不是倒数第 2 个子元素（倒数第 2 是<li>C</li>？不对，倒数第 1 是<footer></footer>，倒数第 2 才是<li>C</li>—— 这里它确实是<li>，所以会生效。但若改成:nth-last-child(1)，就匹配不到<li>，因为倒数第 1 是<footer></footer>） -
li:nth-last-of-type(1)→ 匹配<li>C</li>：它忽略<footer></footer>，只在所有<li>中倒数取第 1 个
结论：要严格按 DOM 顺序定位（比如做动画序列、网格对齐），用 :nth-last-child；只想找某类元素的倒数位置（比如“最后一个按钮”），优先用 :nth-last-of-type。
常见失效场景：为什么写了却没反应？
最常踩的坑不是语法错，而是忽略了选择器的“上下文依赖”和“伪类限制”。
- 父元素没有明确高度或
display: block，导致子元素塌陷，视觉上看不到样式变化 —— 先加outline: 1px solid确认是否真匹配到了 - 用了后代选择器但层级太深，比如
.list li:nth-last-child(1)，而实际<li>是<ul></ul>的直接子元素，中间没嵌套 —— 检查 DOM 结构是否和选择器预期一致 - CSS 优先级被覆盖：比如全局重置里写了
li { color: black !important; }，那你的:nth-last-child规则就无效 —— 用浏览器开发者工具的“Computed”面板看最终生效样式 - 动态插入元素后未重新计算：JS 插入新
<li>时，原来倒数第 2 个可能变成倒数第 3 个 ——:nth-last-child是实时计算的，不用手动更新，但得确保插入后 DOM 结构完整（比如没漏掉闭合标签）
配合 :not() 做排除式倒序操作
单纯倒数选择有时不够用，比如“除了最后一个，其余都加边框”。这时候组合使用更灵活。
例如隐藏除最后两个外的所有项：
li:not(:nth-last-child(-n+2)) { display: none; }
-
-n+2表示“从倒数第 1 个开始，连续取 2 个”，即倒数第 1 和倒数第 2 -
:not()把这两个排除掉，剩下就是前面所有 - 注意括号必须完整，
:not(:nth-last-child(1)):not(:nth-last-child(2))语义等价但写法冗长，且无法扩展到“最后 n 个” - 这种写法在响应式列表截断、折叠菜单、分页控制中很实用，但别滥用 —— 过深的伪类组合会影响渲染性能，尤其在长列表中
真正难的不是写出一个能跑的 :nth-last-child，而是想清楚你要锚定的是“DOM 顺序里的倒数位置”，还是“某类元素里的倒数位置”，这个判断错了，后面全白调。
