隔行换色思路总结

隔行换色（斑马纹效果）是前端开发中常见的需求，通常用于表格、列表等数据展示场景，目的是提升可读性。以下是实现隔行换色的核心思路总结：

一、核心思路

‌通过判断行索引的奇偶性‌，为不同行应用不同的背景色或样式类。实现方式可分为静态和动态场景：

二、实现方案分类

1. 纯 CSS 方案

• ‌nth-child 选择器‌
  利用 :nth-child(even/odd) 伪类选择器直接匹配奇偶行：

  cssCopy Code

  tr:nth-child(even) { background: #f2f2f2; } tr:nth-child(odd) { background: white; }

• ‌nth-of-type 选择器‌
  类似 nth-child，但更严格匹配元素类型：

  cssCopy Code

  tr:nth-of-type(2n) { background: #f5f5f5; }

• ‌兼容性处理‌
  对老旧浏览器（如 IE8）可使用 JavaScript 补充类名。

2. JavaScript 动态方案

适用于需要动态操作 DOM 的场景（如 AJAX 加载数据）：

• ‌遍历元素并添加类名‌

  javascriptCopy Code

  const rows = document.querySelectorAll('tr'); rows.forEach((row, index) => { row.classList.add(index % 2 === 0 ? '