nth-last-child(n)从最后一个子元素开始往前数，选中第n个，仅按父容器中所有同级子元素的顺序倒数，不区分标签类型。
nth-last-child(n) 怎么选倒数第几个元素
直接说结论：nth-last-child(n) 从最后一个子元素开始往前数，选中第 n 个。它只看「在父容器中同级的、同类型（默认不限类型）的子元素」里的位置，不关心内容或类名。
常见错误是以为它能跨标签类型筛选，比如父元素里有 <div> 和 <code><p></p> 混排，写 li:nth-last-child(2) 却没生效——因为压根没有 <li>，或者 <li> 不在倒数第二的位置上。
-
div:nth-last-child(1)→ 选中父容器里最后一个子元素，且这个子元素必须是div -
:nth-last-child(2)（无标签名）→ 选中所有子元素中倒数第二个，不管是什么标签 - 如果父元素最后一个子是
<span></span>，那div:nth-last-child(1)就不会匹配任何div
想选最后3个元素，为什么 nth-last-child(-n+3) 是对的
这不是直觉能推出来的，得拆开看：-n+3 表示当 n=1 时取第3个，n=2 时取第2个，n=3 时取第1个——也就是倒数第1、第2、第3个。本质是生成一个递减序列。
容易踩的坑是写成 nth-last-child(1,2,3)（语法错误），或误用 nth-child(-n+3)（那是正向选前3个）。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
:nth-last-child(-n+3)→ 倒数1~3个 - ❌ 错误：
:nth-last-child(1,2,3)→ CSS 不支持逗号分隔多个值 - ⚠️ 注意：如果父元素只有2个子，
-n+3仍会匹配倒数1和2，不会报错也不会“溢出”
nth-last-child 和 nth-last-of-type 的关键区别
前者按「所有子元素的顺序」倒数，后者只在「同标签名的兄弟元素」里倒数。这是最常混淆的点，尤其在语义化 HTML 中混用 <article></article>、<section></section>、<div> 时。
<p>比如父容器内结构是：<code><div></div>
<article></article><section></section><article></article>，共4个子元素：
-
article:nth-last-child(1)→ 不匹配（最后一个子是<article></article>？不是，是第4个，但第4个确实是<article></article>→ 等等，这里要数：位置1=div，2=article，3=section，4=article→ 所以article:nth-last-child(1)✅ 匹配第4个 -
article:nth-last-of-type(1)→ 匹配倒数第一个<article></article>，也就是第4个（因为总共就两个article，位置2和4，倒数第一是4） - 但如果把最后一个
<article></article>换成<footer></footer>，那么article:nth-last-of-type(1)就变成匹配第2个，而article:nth-last-child(1)完全不匹配
兼容性和实际使用时的边界情况
nth-last-child 在 IE9+ 和所有现代浏览器都支持，但 IE8 及更早版本完全不支持，且不支持任何形式的回退。如果你的项目还需兼容 IE8，就得用 JS 或额外 class 控制。
性能上基本无压力，但要注意：它依赖 DOM 结构稳定。如果用 JS 动态增删子元素，样式会实时响应，但若批量操作（比如用 innerHTML 替换整个父容器），可能触发重排，倒数逻辑会基于新结构重新计算。
- 动态插入元素后，不需要手动刷新样式，浏览器自动重算
- 用
display: none隐藏的元素仍参与nth-last-child计数 - 用
visibility: hidden或opacity: 0的元素也照常计数 - 真正跳过计数的，只有被
remove()或未 append 到 DOM 的节点
倒数选择看着简单，真正难的是确认「谁是子元素」「哪些被算进去」「标签是否一致」——这几个问题没理清，写十遍 -n+3 都白搭。
