:nth-of-type(odd) 正确选择第1、3、5…个同类型p标签，因它只统计同标签名元素在父容器中的位置；混入h2、div等时，:nth-child(odd)会误选非p元素，故实际应优先用:nth-of-type(odd)。
为什么 :nth-of-type(odd) 对 <p> 不总生效
直接写 p:nth-of-type(odd) { background: #eee; } 看起来合理，但常发现只有第 1、3、5 个 <p> 被选中——而中间穿插了 <h2>、<div> 或其他元素时，序号就“跳了”。因为 :nth-of-type 只统计**同类型标签**在父容器中的位置，不是全局第几个 <p>。
想真正按“第 1、3、5…个段落”着色，该用 :nth-child 还是 :nth-of-type
取决于 HTML 结构是否“干净”：
- 如果所有兄弟节点都是
<p>（比如纯文本段落流），:nth-of-type(odd)和:nth-child(odd)效果一致 - 如果父容器里混有
<h2>、<img>、<div>等，:nth-child(odd)会选中“第 1、3、5…个子元素”，不一定是<p>；而:nth-of-type(odd)只数<p>，更安全 - 多数实际场景中，你真正想要的是“第 1、3、5…个
<p>标签”，所以:nth-of-type(odd)是正确选择 —— 只要确保这些<p>在同一个父级下
常见失效原因和修复方式
以下情况会导致 :nth-of-type(odd) 看似没反应：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 父容器不是直接包裹
<p>的那个元素（比如段落被套在<div class="content">里，但 CSS 写在body p:nth-of-type(odd)上，结果匹配到其他位置的<p>） - CSS 优先级被更高权重的规则覆盖（例如内联样式或
!important冲突） - 部分旧版 IE（≤8）完全不支持
:nth-of-type，需确认目标环境 - HTML 中存在注释、空格文本节点不影响
:nth-of-type，但会影响:nth-child—— 这也是它更“稳定”的一个点
最小可用示例与验证方法
复制下面代码到 HTML 文件中，打开就能看到奇数段落带灰底：
立即学习“前端免费学习笔记（深入）”；
<style>
article p:nth-of-type(odd) {
background-color: #f5f5f5;
}
</style>
<article>
<p>这是第 1 段（奇数，有背景）</p>
<h2>小标题</h2>
<p>这是第 2 段（偶数，无背景）</p>
<div>无关容器</div>
<p>这是第 3 段（奇数，有背景）</p>
</article>
注意：必须用 <article>（或其他明确父容器）包裹，不能直接写在 body 下又混入其他块级元素，否则 :nth-of-type 会跨整个 body 计数，行为不可控。
