如何使用 CSS nth-of-type 实现段落交替背景色的优雅控制-js教程-PHP中文网

如何使用 CSS nth-of-type 实现段落交替背景色的优雅控制

本文介绍一种比 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 文件）：

CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载
```
.container p {
background: white;
padding: 1rem;
font-family: monospace;
margin: 0.5rem 0;
}
```

.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');
      }
    });
  }
});</p>

? 关键优势总结：