怎样用CSS的:nth-of-type选择特定类型的奇数项？-css教程-PHP中文网

img:nth-of-type(odd) 失效的根本原因是 dom 结构破坏了“同类型兄弟”前提：目标 img 必须是同一父元素的直接子元素，且父级不能有其他同级干扰元素；否则需改用 class、:nth-child 配合标签限定或 js 动态处理。

怎样用css的:nth-of-type选择特定类型的奇数项？

不是选择器写错了，而是 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></figcaption></figure> 套了一层 → 每个 img 都在独立 figure 里，彼此不是兄弟，img:nth-of-type(odd) 实际匹配每个 figure 中的唯一 img，也就是全部
用了 <picture></picture> 包裹 img → 同样导致 img 不再是父容器的直接子元素

缺一不可，否则别硬套：

所有目标元素必须是**同一父元素的直接子元素**（不能嵌套在 figure、picture、div 等中间层里）
父元素下**不能有其他干扰型同级元素**——比如你想选奇数位 p，但父元素开头是 h2 + p + div + p，那第二个 p 是 p:nth-of-type(2)，不是 :nth-of-type(odd)
HTML 中没有隐藏结构干扰：注释节点、<template></template>、服务端注入的占位符等不影响计数，但会扰乱人工数序号的判断

最稳妥的验证方式：打开开发者工具，选中父元素，在 Elements 面板里手动数一遍同标签名的子节点（只看开始标签，忽略文本和注释）。

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

如果 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 及以下