:nth-of-type(odd) 正确选择第1、3、5…个同类型p标签，因它只统计同标签名元素在父容器中的位置；混入h2、div等时，:nth-child(odd)会误选非p元素，故实际应优先用:nth-of-type(odd)。
为什么 :nth-of-type(odd) 对 <p></p> 不总生效
直接写 p:nth-of-type(odd) { background: #eee; } 看起来合理，但常发现只有第 1、3、5 个 <p></p> 被选中——而中间穿插了 <h2></h2>、<div> 或其他元素时，序号就“跳了”。因为 <code>:nth-of-type 只统计**同类型标签**在父容器中的位置，不是全局第几个 <p></p>。
想真正按“第 1、3、5…个段落”着色，该用 :nth-child 还是 :nth-of-type
取决于 HTML 结构是否“干净”：
- 如果所有兄弟节点都是
<p></p>（比如纯文本段落流），:nth-of-type(odd)和:nth-child(odd)效果一致 - 如果父容器里混有
<h2></h2>、<img alt="css 想给奇数段落添加背景颜色怎么办_使用 :nth-of-type(odd) 设置背景" >、<div> 等，<code>:nth-child(odd)会选中“第 1、3、5…个子元素”，不一定是<p></p>；而:nth-of-type(odd)只数<p></p>，更安全 - 多数实际场景中，你真正想要的是“第 1、3、5…个
<p></p>标签”，所以:nth-of-type(odd)是正确选择 —— 只要确保这些<p></p>在同一个父级下 - 父容器不是直接包裹
<p></p>的那个元素（比如段落被套在<div class="content"> 里，但 CSS 写在 <code>body p:nth-of-type(odd)上，结果匹配到其他位置的<p></p>） - CSS 优先级被更高权重的规则覆盖（例如内联样式或
!important冲突） - 部分旧版 IE（≤8）完全不支持
:nth-of-type，需确认目标环境 - HTML 中存在注释、空格文本节点不影响
:nth-of-type，但会影响:nth-child—— 这也是它更“稳定”的一个点
常见失效原因和修复方式
以下情况会导致 :nth-of-type(odd) 看似没反应：
最小可用示例与验证方法
复制下面代码到 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></article>（或其他明确父容器）包裹，不能直接写在 body 下又混入其他块级元素，否则 :nth-of-type 会跨整个 body 计数，行为不可控。
