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