本文介绍一种比 JavaScript 循环更简洁、高效且可维护的方式：利用 CSS 的 :nth-of-type(even) 伪类配合类名切换，实现容器内偶数段落（即“每两个中的第二个”）自动应用背景色，无需手动遍历 DOM。
本文介绍一种比 javascript 循环更简洁、高效且可维护的方式：利用 css 的 `:nth-of-type(even)` 伪类配合类名切换，实现容器内偶数段落（即“每两个中的第二个”）自动应用背景色，无需手动遍历 dom。
在 DOM 操作中，频繁通过 JavaScript 遍历元素并逐个修改样式不仅冗余，还容易因状态判断错误（如 i % 2 === 0 逻辑与视觉预期不符）、内联样式的高优先级干扰或未初始化样式导致行为异常（例如 paragraphs[i].style.backgroundColor 初始为空字符串 ''，但并非 'white'，导致三元判断失效）。
更专业、更推荐的做法是将样式逻辑交还给 CSS，用 JavaScript 仅负责触发状态变更。核心思路是：为父容器添加/移除一个语义化类名（如 colours），再通过 CSS 规则精准控制子元素样式。
✅ 正确实现步骤如下：
HTML 结构优化：确保
<button></button>与目标<div class="container"> 相邻，便于 JS 定位；所有 <code><p></p>标签直接位于.container内（避免嵌套干扰:nth-of-type计算）。立即学习“前端免费学习笔记（深入）”；
-
CSS 样式声明（推荐写入
<style></style>或外部 CSS 文件）：.container p { background: white; padding: 1rem; font-family: monospace; margin: 0.5rem 0; } - ✅ 解耦清晰：样式归 CSS，交互归 JS，符合关注点分离原则；
- ✅ 性能更优：避免重复 DOM 查询与内联样式强制重排；
- ✅ 可扩展性强：只需修改 CSS 即可切换颜色、动画或响应式规则；
- ✅ 天然支持回退：若 JS 失败，页面仍保持默认白底，体验降级平滑。
.container.colours p:nth-of-type(even) { background: lightblue; color: darkblue; }
> ⚠️ 注意：`:nth-of-type(even)` 匹配的是**同类型标签中的偶数序号元素**（即第 2、4、6… 个 `<p>`），而非索引为偶数的元素（`i % 2 === 0` 对应第 1、3、5… 个）。这恰好符合“每两个段落中高亮第二个”的常见需求。
3. **精简 JavaScript 逻辑**（仅控制状态）：
```javascript
document.addEventListener('DOMContentLoaded', () => {
const button = document.querySelector('button');
if (button) {
button.addEventListener('click', (e) => {
// 安全获取前一个兄弟元素（即 .container）
const container = e.target.previousElementSibling;
if (container && container.classList.contains('container')) {
container.classList.toggle('colours');
}
});
}
});? 关键优势总结：
? 小提示：若需“奇数段落”着色，将 even 改为 odd 即可；如需更复杂模式（如每 3 个一循环），可用 :nth-of-type(3n+1) 等表达式。
最终效果：点击按钮，所有偶数序号段落（第 2、4、6… 个）自动切换为浅蓝色背景与深蓝文字，再次点击则恢复默认——简洁、可靠、专业。
