:nth-last-child() 失效是因为它按父元素所有子节点（含文本、注释等）倒序计数，而非仅目标元素；应优先用 :nth-last-of-type() 或检查真实 dom 结构。
:nth-last-child() 本身不能“实现布局”，它只是定位元素；真正起作用的是你定位后加的样式（比如 display、margin、opacity）。多数人卡在“写了却没生效”，根本原因不是语法错，而是对它的计数逻辑和 DOM 真实结构缺乏校验。
为什么 :nth-last-child(1) 经常不匹配最后一个目标元素
它不是“找最后一个 li”，而是“找倒数第一个子节点，且这个节点必须是 li”。只要父容器末尾有文本节点（换行缩进产生的 #text）、注释（<!-- -->）或非目标标签（比如 <div class="loading"></div>），:nth-last-child(1) 就会失效。
- 打开浏览器 Elements 面板，展开父元素，灰色文字就是
#text节点，绿色是注释 —— 它们全算子元素 -
li:last-child和li:nth-last-child(1)在干净结构下等价，但后者更脆弱 - Vue/React 模板里
v-if、v-for生成的注释，SSR 插入的空白符，都会让位置偏移
:nth-last-child(-n+3) 和 :nth-last-of-type(-n+3) 到底该用哪个
前者按 DOM 物理位置倒数取前三，后者按同类型元素倒数取前三。绝大多数场景你应该选后者。
-
li:nth-last-child(-n+3)：要求倒数第 1、2、3 个子节点**恰好都是li**，否则漏选 -
li:nth-last-of-type(-n+3)：只统计所有li，自动跳过p、div、注释、空格文本节点 - 动态列表（如无限滚动、条件渲染）中，
:nth-last-of-type()几乎总是更稳定 - 注意：
:nth-last-of-type()不识别class或属性，只看 HTML 标签名
想“显示最后 N 个”，别只靠 :nth-last-child()
纯 CSS 没有“显示最后 N 个”的原子操作。:nth-last-child(-n+N) 表面像，实则依赖结构连续性 —— 中间插一个非目标节点，就断掉。
- 可靠做法是组合使用：
li:nth-last-of-type(N), li:nth-last-of-type(N) ~ li，先锚定倒数第 N 个，再选它之后所有同类型兄弟 - 如果目标元素类型不统一（比如混着
div和span但都带.item类），CSS 无解，必须用 JS 控制data-属性或 class - 移动端隐藏末尾条目时，
li:nth-last-child(-n+2) { display: none; }看似简单，但上线后因 SSR 或构建工具插入空格而失效，很常见
最易被忽略的点：你以为的“最后三个列表项”，在浏览器眼里可能是“第 7、9、11 个子节点”。不检查真实 DOM 结构，所有 :nth-last-child 写法都是赌运气。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
