img:nth-of-type(odd) 失效的根本原因是 DOM 结构破坏了“同类型兄弟”前提：目标 img 必须是同一父元素的直接子元素，且父级不能有其他同级干扰元素；否则需改用 class、:nth-child 配合标签限定或 JS 动态处理。
img:nth-of-type(odd) 为什么经常不生效
不是选择器写错了，而是 DOM 结构破坏了「同类型兄弟」的前提。浏览器数的是同一父元素下、所有 img 标签在同级中的顺序，中间夹着 h2、div、figure 或换行空格（文本节点不影响计数，但结构上可能误导人），都会让预期序号错位。
常见失效场景：
-
<div class="list"><h2>标题</h2><img src="1.jpg"><img src="2.jpg"></div>→ 第一张图是父元素第 2 个子元素，但它是第一个img，所以img:nth-of-type(odd)会命中它；可你本意可能是“视觉上第 1 张”，结果没错，但逻辑容易混淆 -
<figure><img><figcaption></figure>套了一层 → 每个img都在独立figure里，彼此不是兄弟，img:nth-of-type(odd)实际匹配每个figure中的唯一img，也就是全部 - 用了
<picture>包裹img→ 同样导致img不再是父容器的直接子元素
确保能用 :nth-of-type(odd) 的三个硬条件
缺一不可，否则别硬套：
- 所有目标元素必须是**同一父元素的直接子元素**（不能嵌套在
figure、picture、div等中间层里） - 父元素下**不能有其他干扰型同级元素**——比如你想选奇数位
p，但父元素开头是h2+p+div+p，那第二个p是p:nth-of-type(2)，不是:nth-of-type(odd) - HTML 中没有隐藏结构干扰：注释节点、
<template>、服务端注入的占位符等不影响计数，但会扰乱人工数序号的判断
最稳妥的验证方式：打开开发者工具，选中父元素，在 Elements 面板里手动数一遍同标签名的子节点（只看开始标签，忽略文本和注释）。
立即学习“前端免费学习笔记（深入）”；
替代方案：当结构无法调整时怎么办
如果 DOM 已固定、不能删 figure 或挪 h2，:nth-of-type 就不是解法。这时候该换思路：
- 加 class 控制：
<img class="odd">+.odd { filter: grayscale(100%); }，JS 动态加或构建时注入 - 用
:nth-child配合标签限定：.gallery > :nth-child(odd) img（前提是每奇数个容器里恰好有一个img） - CSS Selectors Level 4 的新语法
:nth-child(odd of img)—— 目前仅 Safari 16.4+ 和 Chrome 119+ 支持，生产环境慎用 - JS 补位：
document.querySelectorAll('img')后用forEach((el, i) => i % 2 === 0 && el.classList.add('odd'))
注意：不要写 img:nth-of-type(2n+1) 试图“绕过”问题——它和 odd 完全等价，只是写法不同，不解决结构缺陷。
滤镜叠加与移动端兼容细节
给奇数项加样式不只是选中，还要考虑实际渲染效果：
-
filter值是覆盖式，不是累加式。写filter: brightness(1.1); filter: contrast(1.2);后者会覆盖前者，必须写成一条：filter: brightness(1.1) contrast(1.2); - iOS Safari 对
filter重绘敏感，尤其配合滚动时。务必加backface-visibility: hidden;防闪烁 -
blur()开销大，4 张以上图片同时启用易卡顿。如只需弱化视觉权重，用opacity: .92或伪元素遮罩更轻量 - 旧版 Safari（iOS 9–12）需
-webkit-filter前缀，但当前主流已无需，除非明确支持 iOS 12 及以下
真正难的从来不是写对那行 CSS，而是确认 DOM 是否真的允许你靠纯选择器解决问题——多数时候，结构比样式更值得先动刀。
