img:nth-of-type(odd) 失效是因为该选择器只对同父级、同标签名的兄弟元素计数，若 img 被 figure 包裹或父容器中存在 h2、div 等同级元素，则无法形成连续的 img 兄弟关系，必须确保所有 img 是同一父元素的直接子元素且无其他干扰兄弟节点。
为什么 p:nth-of-type(odd) 不能直接套用在 img 上？
很多人一上来就写 img:nth-of-type(odd) { filter: grayscale(100%); }，结果发现样式没生效——不是语法错，而是 DOM 结构干扰了计数。:nth-of-type 只对「同类型兄弟元素」计数，如果 img 的父容器里混着 div、p、span 等其他标签，它们不会被跳过，但也不会参与 img 的计数；真正影响的是：这些非 img 元素是否和 img 处于同一级、同一父元素下。
常见陷阱：
- 父元素是
<div class="gallery">，但里面先放了一个<h2>标题，再放<img>→ 第一张图其实是该父元素下第一个img，但它是整个父元素的第二个子元素 - 用了
<figure><img><figcaption></figure>包裹 → 每个img都在独立<figure>里，彼此不构成兄弟关系，img:nth-of-type(odd)永远只匹配每个<figure>里的第一张图（即全部）
img:nth-of-type(odd) 能正常工作的前提条件
必须满足三个硬性条件，缺一不可：
- 所有目标
img标签是同一父元素的**直接子元素** - 父元素下没有其他
img类型以外的「同级干扰元素」（比如<div>、<p>等）——或者即使有，你确认它们不影响你要选的奇数位序号 - HTML 中
img标签未被包裹在其他容器内（如<picture>、<figure>、<a>），否则它们就不是兄弟节点了
典型可用结构：
立即学习“前端免费学习笔记（深入）”；
<div class="photo-list"> <img src="1.jpg"> <img src="2.jpg"> <img src="3.jpg"> <img src="4.jpg"> </div>
此时 img:nth-of-type(odd) 精确命中第 1、3 张图；img:nth-of-type(even) 命中第 2、4 张。
给奇数位图片加滤镜的实际写法与参数注意点
滤镜本身支持链式叠加，但性能敏感，尤其在移动端。直接写 filter: contrast(1.2) brightness(1.1) saturate(1.3); 比单用 grayscale() 更常见，也更可控。
-
filter值会覆盖浏览器默认渲染，建议始终加上backface-visibility: hidden;防止 iOS Safari 渲染闪烁 - 避免在大量图片上同时启用
blur()，它触发重绘开销大；如需模糊，优先用opacity或伪元素遮罩替代 - 若要兼容旧版 Safari（-webkit-filter 前缀，但当前主流已无需
示例（仅作用于奇数位 img）：
.photo-list img:nth-of-type(odd) {
filter: contrast(1.15) saturate(1.2);
backface-visibility: hidden;
}
当 DOM 不规整时，怎么绕过 :nth-of-type 的限制？
现实项目中，父容器往往夹杂标题、说明文字、分隔线等，导致 img 不连续。这时硬靠 :nth-of-type 会失效，得换思路：
- 给每张图加统一类名（如
class="gallery-img"），再用.gallery-img:nth-of-type(odd)—— 但前提是这些元素仍是同级兄弟；如果被<div>隔开，依然无效 - 改用 JS 动态加 class：
document.querySelectorAll('.gallery-img').forEach((el, i) => { if (i % 2 === 0) el.classList.add('odd-filter'); });，再写.odd-filter { filter: ... } - 最稳妥：重构 HTML，把所有
img提到同一层级，用注释或空<span>占位替代干扰内容，保持语义清晰
真正难的从来不是写对一行 CSS，而是判断当前结构是否允许它按预期工作——多数时候，问题出在 HTML 组织方式，而非选择器本身。
