:last-child选不到目标元素是因为它要求元素既是父元素最后一个子节点又类型一致；:last-of-type可解决多数误判但依赖同类型标签末位；动态或混排场景应改用JS或预设class控制。
为什么 :last-child 总是选不到你想要的最后一个元素
因为 :last-child 匹配的是「父元素下最后一个子节点，且类型要一致」。它不看元素是否「视觉上排在最后」，也不管你写了多少个同级元素——只要最后一个子节点不是目标标签（比如是 </div> 后面还跟了个 <span>），那前面的 <div> 就永远不是 :last-child。
常见诱因包括：HTML 中有注释、空格换行生成的文本节点（在某些解析模式下）、动态插入的兄弟元素、或者父容器里混用了不同标签（如 <p> 和 <div> 交替出现）。
:last-of-type 能解决多数误判场景吗
能，但有前提：你要确保目标元素在父容器中是「同类型标签的最后一个」。比如父元素下有三个 <li>，后面跟着一个 <p>，那第三个 <li> 就是 :last-of-type；但如果中间穿插了另一个 <li>（哪怕被 JS 插入），它就可能失效。
- 适用于结构相对稳定、标签类型明确的列表（如导航菜单、表单项组）
- 不适用于混合标签但需按渲染顺序选末尾的情况（比如
<div><span>A</span><em>B</em><strong>C</strong></div>，你想高亮 C，:last-of-type会失败，因为<strong>是唯一类型） - 注意 IE8 不支持
:last-of-type
用 :nth-last-child(1) 替代时要注意什么
这个伪类和 :last-child 行为一致（仍是看位置+类型），但它更暴露逻辑：必须是「倒数第一个子元素，且是当前选择器指定的标签」。所以它并不能绕过类型限制，只是写法更显式。
立即学习“前端免费学习笔记（深入）”；
真正有用的是组合写法：li:nth-last-child(1):first-child 可以判断是否「仅有一个 <li>」，而 li:nth-last-child(2):nth-child(n+2) 这类技巧适合定位倒数第二个——但这些都不解决「选渲染末尾」的本质问题。
别指望靠改写伪类名蒙混过关；关键还是得控制父元素的子节点构成。
什么时候该放弃 CSS 伪类，改用 JS 或 class 控制
当你的元素是动态渲染（React/Vue 列表、AJAX 加载内容）、或父容器中必然存在干扰节点（如服务端模板注入的注释、SSR 的空格、CMS 自动添加的提示 <div class="ad-banner">）时，CSS 伪类基本不可靠。
- React 中可在
map()时用索引判断：index === items.length - 1 && 'last-item' - Vue 中用
:class="{ 'last-item': index === list.length - 1 }" - 纯 JS 可查
parentElement.children（只含元素节点，不含文本/注释），再取最后一项加 class - 服务端渲染时，提前计算好并输出
class="item item--last"最省心
伪类看着简洁，但一旦 DOM 结构稍有浮动，调试成本远高于多写一个 class。
