:nth-last-of-type(2) 选不到倒数第二张图片，因为它按同类型元素在父容器中的倒序位置匹配，而非所有img的全局倒序；若中间夹杂其他标签（如p、span），则img的位置序号被分割，导致匹配结果偏离预期。
为什么 :nth-last-of-type 选不到倒数第二张图片？
直接写 img:nth-last-of-type(2) 很可能失效——因为 :nth-last-of-type 是按「同类型元素在父容器中的倒序位置」匹配，不是按所有 img 元素整体倒数。如果父元素里有 div、p 等其他兄弟节点，img 的“type”位置会被打断。例如：
<div> <p>文字</p> <img src="1.jpg"> <span>说明</span> <img src="2.jpg"> <img src="3.jpg"> </div>这里三个
img 在父元素中分别位于第2、第4、第5个位置，所以 img:nth-last-of-type(2) 实际匹配的是第4个位置的 img（即倒数第二“出现”的 img），但它的视觉顺序是中间那张，不是 DOM 中最后两个 img 里的倒数第二张。
:nth-last-of-type(2) 的实际生效条件
它只在满足以下全部条件时，才等价于“倒数第二张图片”：
- 父容器内所有子元素中，
img必须连续排列（中间不能夹杂其他标签） - 父容器下没有其他
img的同级兄弟元素（比如没有figure、picture或带img的自定义组件） - 你确定要选的是「该类型元素在父级中倒数第二个出现的实例」，而非「所有
img中 DOM 顺序倒数第二的那个」
换句话说：它看的是“同标签名兄弟元素的倒序索引”，不是“所有图片的全局倒序”。多数人想要的是后者，但 CSS 原生不提供 :nth-last-of-img 这种伪类。
更可靠的替代方案：用 :nth-last-child 配合类型限定
如果图片是唯一需要定位的目标，且结构可控，可以改用 :nth-last-child 并显式限定为 img：
img:nth-last-child(2)
这表示「选父元素中倒数第二个子元素，且该子元素必须是 img」。但它仍有前提：
立即学习“前端免费学习笔记（深入）”；
- 倒数第二个子元素恰好是
img，否则不匹配（比如倒数第二是figcaption，就完全失效） - 适用于图片独占一行或作为主要子元素的场景（如相册列表、纯图区块）
- 比
:nth-last-of-type更贴近“视觉/结构倒数第二”的直觉，但容错更低
真正通用的解法：JavaScript 补位 + class 标记
CSS 无法动态计算“所有 img 中倒数第二张”，这是它的能力边界。生产环境建议用 JS 定位后加 class：
const imgs = document.querySelectorAll('img');
if (imgs.length >= 2) {
imgs[imgs.length - 2].classList.add('second-to-last-img');
}再配合 CSS：
.second-to-last-img {
border: 2px solid red;
/* 其他样式 */
}注意点：
- 需确保脚本在 DOM 加载完成后执行（
DOMContentLoaded或置于</body>前） - 如果图片是异步插入（如 React 渲染、懒加载完成），需在插入后重新运行标记逻辑
- 服务端渲染（SSR）场景下，CSS 类必须同步输出，否则首屏无样式
纯 CSS 没有银弹。当结构不规整、兄弟节点混杂、或需要稳定响应“所有 img 中倒数第二张”时，JS 标记是最小侵入且可预测的做法。
