如何为带有特定TR类的表格行实现颜色交替效果？

别担心，不用jQuery，纯CSS就能搞定这个需求！核心是利用CSS的结构化伪类选择器，针对不同class的行组分别设置奇偶行的背景色。下面分两种常见场景给你方案：

场景1：同组行连续排列 #

如果你的绿色行和橙色行是各自成块连续排列的（比如先展示所有绿色行，再展示所有橙色行），用基础的:nth-child就能轻松实现：

HTML示例 #

<table>
  <thead>
    <tr>
      <th>列标题1</th>
      <th>列标题2</th>
    </tr>
  </thead>
  <tbody>
    <!-- 绿色交替行组 -->
    <tr class="green-row">
      <td>绿色行1</td>
      <td>内容示例</td>
    </tr>
    <tr class="green-row">
      <td>绿色行2</td>
      <td>内容示例</td>
    </tr>
    <tr class="green-row">
      <td>绿色行3</td>
      <td>内容示例</td>
    </tr>
    <!-- 橙色交替行组 -->
    <tr class="orange-row">
      <td>橙色行1</td>
      <td>内容示例</td>
    </tr>
    <tr class="orange-row">
      <td>橙色行2</td>
      <td>内容示例</td>
    </tr>
    <tr class="orange-row">
      <td>橙色行3</td>
      <td>内容示例</td>
    </tr>
  </tbody>
</table>

CSS代码 #

/* 绿色行组：奇偶行深浅绿交替 */
.green-row:nth-child(odd) {
  background-color: #e8f5e9; /* 浅薄荷绿 */
}
.green-row:nth-child(even) {
  background-color: #c8e6c9; /* 稍深的草绿 */
}

/* 橙色行组：奇偶行深浅橙交替 */
.orange-row:nth-child(odd) {
  background-color: #fff3e0; /* 浅橙黄 */
}
.orange-row:nth-child(even) {
  background-color: #ffe0b2; /* 稍深的暖橙 */
}

这个方案依赖行组的连续性，:nth-child会以父元素（这里是tbody）为范围计数奇偶，连续的同class行能被正确匹配。

场景2：不同组行交叉穿插 #

如果绿色行和橙色行是混合排列的（比如绿、橙、绿、橙随机交替），上面的方法就失效了。这时候可以用CSS4的:nth-child(of <selector>)选择器，它能忽略其他class的行，仅针对当前class的元素单独计数奇偶：

CSS代码 #

/* 绿色行组：仅在.green-row内部计数奇偶 */
.green-row:nth-child(odd of .green-row) {
  background-color: #e8f5e9;
}
.green-row:nth-child(even of .green-row) {
  background-color: #c8e6c9;
}

/* 橙色行组：仅在.orange-row内部计数奇偶 */
.orange-row:nth-child(odd of .orange-row) {
  background-color: #fff3e0;
}
.orange-row:nth-child(even of .orange-row) {
  background-color: #ffe0b2;
}

这个选择器目前Chrome、Firefox、Safari 15.4+都支持，兼容性足够应对大部分现代项目，完美解决混合行的交替需求。

旧浏览器兼容备选方案 #

如果需要兼容IE11这类老旧浏览器，可以在生成HTML时，给每个组的行额外加上.odd和.even的class，再用CSS直接选中：

HTML示例 #

<tr class="green-row odd">...</tr>
<tr class="green-row even">...</tr>
<tr class="orange-row odd">...</tr>
<tr class="orange-row even">...</tr>

CSS代码 #

.green-row.odd { background-color: #e8f5e9; }
.green-row.even { background-color: #c8e6c9; }
.orange-row.odd { background-color: #fff3e0; }
.orange-row.even { background-color: #ffe0b2; }

这个方法兼容性拉满，唯一需要注意的是在渲染HTML时多一步class标记（可以通过后端模板渲染实现，不用前端JS）。

你可以根据自己的实际场景选对应的方案，试一下就能达到你想要的交替效果啦！

内容的提问来源于stack exchange，提问作者pufAmuf