: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> @@##@@ <span>说明</span> @@##@@ @@##@@ </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或置于
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
