:last-child在动态列表中失效是因为它只匹配DOM树中最后一个子节点且类型必须完全一致；Vue/React注入的注释、SSR换行文本节点或JS插入的div都会导致其失配，应改用:last-of-type或JS动态标记末项。
:last-child 在动态列表中表现异常，根本不是选择器坏了，而是它压根不“看”你渲染出来的视觉顺序——它只认 DOM 树里物理排列的最后一个子节点，且必须类型完全匹配。只要 Vue/React 插入了注释、SSR 留下了换行文本节点、或者 JS 动态加了个 <div class="loading">，:last-child 就立刻失效。
为什么 Vue/React 列表里 :last-child 总是“看不见”最后一个 li
框架在渲染时会注入大量非元素节点：Vue 的 <!--v-if--> 注释、React 的 hydration comment、服务端模板输出的空格或换行符，都会被浏览器当作 #text 节点计入父容器的 childNodes。哪怕你写的 HTML 看起来干净，实际 DOM 可能是：#text → li → li → <!-- hydration --> → li → #text。此时最后一个子节点是文本，不是 li，li:last-child 自然不匹配。
实操建议：
- 在控制台运行
document.querySelector('ul').childNodes，直接看真实子节点构成 - 检查是否漏写了
:key，导致 Vue 复用节点时插入了额外内容 - 避免用
innerHTML +=动态追加，这会重建整个子树，所有索引重算
:last-of-type 为什么比 :last-child 更适合动态列表
:last-of-type 不关心中间夹了多少 div、注释或文本节点，它只统计同标签名（比如所有 li）并取其中最后一个。哪怕末尾跟着 <div class="ad"></div> 或 <!-- loading -->，li:last-of-type 依然能稳稳命中。
立即学习“前端免费学习笔记（深入）”；
但要注意：
- 它只识别 HTML 标签名，不识别自定义组件名（
<MyItem>渲染为div，就得写div:last-of-type） - IE8 不支持，老项目需确认底线
- 对
display: none的元素仍计数——隐藏的li会影响结果
什么时候该放弃 CSS，改用 JS 或预设 class
CSS 伪类全是静态解析的，对 display: none、visibility: hidden、JS 增删的元素完全无感。一旦列表项由 AJAX 加载、条件渲染频繁切换、或父容器里必然混有广告位/分隔线/错误边界组件，:last-child 和 :last-of-type 都可能失准。
更可控的做法：
- 用
document.querySelector('ul').children（只返回元素节点，自动过滤文本和注释）取最后一项，手动加is-last类 - 在模板中由框架逻辑判断末项（如 Vue 的
v-for索引、React 的map回调参数），直接绑定 class - 避免依赖伪类控制关键布局（比如卡片右间距、圆角边框），这些地方出错会直接破坏视觉一致性
真正麻烦的不是写法，而是 DOM 结构本身不可控——尤其在 SSR + Hydration、小程序、或 CMS 注入内容的场景下，你永远不知道父容器末尾会多出什么节点。这时候硬靠 CSS 伪类兜底，不如一开始就让 JS 或模板决定“谁是最后一个”。
