p:nth-of-type(even) 无效是因为它只对同类型兄弟元素计数，而非所有p标签的全局顺序；正确方案是用p:nth-child(even)或js动态添加类。
为什么 :nth-of-type(even) 对 <p></p> 无效？
直接写 p:nth-of-type(even) { background: #f0f0f0; } 常常没反应，不是语法错，而是语义理解偏差。:nth-of-type() 按**同类型兄弟元素**计数，不是按所有 <p></p> 在文档中出现的顺序。如果段落中间夹着 <div>、<code><h2></h2> 或其他非 <p></p> 元素，计数会重置或跳过——它只看「前面有多少个 <p></p> 兄弟」，不关心其他标签。
真正可靠的偶数段落选择方案
要选页面中第 2、4、6… 个 <p></p>（不管中间有没有别的标签），必须用 :nth-child() 配合元素类型判断：
p:nth-child(even) {
background: #f0f0f0;
}
但注意：这要求 <p></p> 在其父容器内**恰好处于偶数位置**。如果父元素第一个子是 <h1></h1>，第二个是 <p></p>，那这个 <p></p> 是 :nth-child(2)，会被命中；但如果第一个是 <div>，第二个是 <code><p></p>，第三个又是 <div>，第四个才是 <code><p></p>，那只有第 2、4 个位置上的 <p></p> 被选中——前提是它们真在偶数序号上。
- 更稳妥的做法是给所有
<p></p>加统一 class（如class="para"），再用.para:nth-of-type(even)——此时:nth-of-type才真正按.para的出现顺序计数 - 若结构不可控，JS 动态加类更可靠：
document.querySelectorAll('p').forEach((p, i) => { if ((i + 1) % 2 === 0) p.classList.add('even-para'); });
:nth-of-type(even) 和 :nth-child(even) 的关键区别
假设 HTML 是：
立即学习“前端免费学习笔记（深入）”；
<article> <h2>标题</h2> <p>第一段</p> <div>无关内容</div> <p>第二段</p> <p>第三段</p> </article>
那么：
-
p:nth-of-type(even)→ 匹配「第二段」和「第三段」？错。实际只匹配「第三段」，因为它是该父元素下第 2 个<p></p>（即:nth-of-type(2)），而「第二段」是第 1 个<p></p>，「第三段」是第 2 个 —— 等等，不对：上面结构里，<p></p>出现顺序是：第 1 个（第一段）、第 2 个（第二段）、第 3 个（第三段），所以:nth-of-type(even)会命中第 2 个（第二段）和第 ? 不，even指 2、4、6…，所以只命中第 2 个（第二段） -
p:nth-child(even)→ 「第一段」是:nth-child(2)（因前有<h2></h2>），「第二段」是:nth-child(4)（前有<h2></h2>、<p></p>、<div>），「第三段」是 <code>:nth-child(5)→ 所以只命中「第一段」和「第二段」实际项目中建议怎么选
多数场景下，你想要的只是「视觉上第 2、4、6… 个段落」，而不是严格按 DOM 树位置。这时最稳的是：
- 结构可控 → 用
p:nth-child(even)，并确保段落是连续的或位置可预期 - 结构不可控（CMS 输出、用户编辑内容）→ 放弃纯 CSS，用 JS 按
querySelectorAll('p')索引处理，或后端/构建时注入序号 class - 想保持纯 CSS 且能改 HTML → 统一封装段落，例如：
<article class="prose"> <div class="para"><p>第一段</p></div> <div class="para"><p>第二段</p></div> </article>
然后写.para:nth-of-type(even) p { background: #f0f0f0; }
别低估 DOM 结构对伪类的影响——看着是“偶数段落”，背后可能是三个不同选择逻辑在打架。
- 结构可控 → 用
