结论：img:nth-last-of-type(1) 稳准选中父容器下最后一个 img 元素，仅按同级 img 标签倒序计数；而 img:last-child 要求 img 必须是父容器最末子节点，易因后续 div、注释等失效。
直接说结论：用 img:nth-last-of-type(1) 能稳稳选中父容器下最后一个 img 元素，前提是它确实是同级中最后一个 img 标签——不看 class、不看 src、不看是否被 JS 动态插入，只认标签名和 DOM 层级。
为什么 img:last-child 常常失效
它要求目标 img 必须是父容器的**最后一个子节点**。但现实中，图片组后面常跟着：div（如图注容器）、script（懒加载脚本）、HTML 注释、甚至空格文本节点。只要后面有哪怕一个兄弟节点，:last-child 就跳过整个 img。
而 img:nth-last-of-type(1) 完全无视这些干扰——它只在所有同级 img 中倒序数，第 1 个就是最后一个。
- ✅ 正确：父容器里有
<img><img><div class="caption"></div>→img:nth-last-of-type(1)匹配第二个img - ❌ 错误：写成
img:last-child→ 不匹配任何元素，因为最后一个子节点是div
动态插入图片时，nth-last-of-type 还生效吗
生效，但仅限于「插入后 DOM 结构更新完成」的那一刻。CSS 伪类不是监听器，它每次重排（reflow）都会重新计算位置。
- JS 用
appendChild()或insertAdjacentElement()插入新img→ 浏览器重排，所有img:nth-last-of-type(1)自动指向新的末位 - JS 只改某个
img的style.display = 'none'→ DOM 结构没变，伪类不重算，原来那个“最后一张”仍被选中（即使它不可见） - React/Vue 中用
map()渲染纯img列表 → 安全；但如果条件渲染混入picture或svg，就不再是“同类型”，nth-last-of-type(1)会跳过它们只数img
常见踩坑点：你以为的“最后一张”，其实不是
根本原因在于你没确认 img 是否真为**直接子元素**，以及是否被包装节点隔离。
- ❌ 错误结构：
<div class="gallery"> <div><img></div> <div><img></div> </div>→ 每个img的父级是div，不是.gallery，所以.gallery img:nth-last-of-type(1)不会命中任何元素（因为.gallery下没有直接img子元素） - ✅ 正确结构：
<div class="gallery"> <img><img> </div>→ 才能用.gallery img:nth-last-of-type(1) - ⚠️ 注意：自定义元素如
<my-img></my-img>在未注册或未启用 CEv3 的浏览器中会被当作未知标签，my-img:nth-last-of-type(1)可能不触发样式
最易被忽略的是父容器的直接子元素构成——打开 DevTools，右键父节点 → “Edit as HTML”，一眼看清真实层级。别靠肉眼猜结构，DOM 不撒谎。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
