如何使用:nth-child伪类实现表格奇偶行颜色区分？

问题根源 #

你的代码有两个核心问题导致:nth-child伪类失效：

1. HTML结构混乱：大量<tr>标签未正确闭合，部分行写完<td>后直接插入空的<tr></tr>，导致表格行结构完全错乱，浏览器无法正确识别行的顺序，自然无法按奇偶规则渲染背景色。
2. CSS选择器错误：当前仅针对第2行设置背景，未覆盖所有奇偶行，且未区分表头（thead）和数据行（tbody），表头行也会被纳入计数范围。

修复步骤 #

1. 修正HTML表格结构 #

清理所有未正确闭合的<tr>标签，确保每一组<td>都被完整的<tr>包裹，显式添加<tbody>标签包裹所有数据行（规范DOM结构）。

2. 调整CSS选择器 #

使用:nth-child(odd)和:nth-child(even)分别匹配奇数行和偶数行，同时限定在<tbody>内，避免影响表头样式：

• 奇数行背景色设为#FFF
• 偶数行背景色设为#CFF

完整代码示例 #

CSS代码 #

.table-pricing {
  float: left;
  width: 70%;
  border-width: 1px;
  border-style: double;
  border-color: #279AF1;
}

/* 表头保持默认样式 */
.table-pricing thead tr {
  background-color: transparent;
}

/* 数据行奇偶色设置 */
.table-pricing tbody tr:nth-child(odd) {
  background-color: #FFF;
}

.table-pricing tbody tr:nth-child(even) {
  background-color: #CFF;
}

HTML代码 #

<table class="table-pricing">
  <thead>
    <tr>
      <td><strong>Product Name</strong></td>
      <th>Description</th>
      <th>Price</th>
      <th>Shoe Type</th>
      <th>Rating</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>All shoe</td>
      <td>For everyone</td>
      <td>150</td>
      <td>Soft shoe</td>
      <td>8</td>
    </tr>
    <tr>
      <td>Yellow shoe</td>
      <td>Best shoe for budget</td>
      <td>49</td>
      <td>hard shoe</td>
      <td>7</td>
    </tr>
    <tr>
      <td>Red shoe</td>
      <td>For pros</td>
      <td>169</td>
      <td>hard shoe</td>
      <td>8.5</td>
    </tr>
    <tr>
      <td>Orange shoe</td>
      <td>Best shoe for budget</td>
      <td>79</td>
      <td>exterme hard shoe</td>
      <td>6</td>
    </tr>
    <tr>
      <td>Pink shoe</td>
      <td>For everyone</td>
      <td>45</td>
      <td>hard shoe</td>
      <td>6</td>
    </tr>
    <tr>
      <td>Grey shoe</td>
      <td>For everyone</td>
      <td>139</td>
      <td>soft shoe</td>
      <td>9.3</td>
    </tr>
    <tr>
      <td>Black shoe</td>
      <td>For everyone</td>
      <td>45</td>
      <td>very soft shoe</td>
      <td>6</td>
    </tr>
    <tr>
      <td>Aqua shoe</td>
      <td>For the family</td>
      <td>75</td>
      <td>very soft shoe</td>
      <td>7</td>
    </tr>
    <tr>
      <td>Indigo shoe</td>
      <td>For beginners</td>
      <td>145</td>
      <td>very soft shoe</td>
      <td>6</td>
    </tr>
    <tr>
      <td>All shoe2</td>
      <td>For everyone</td>
      <td>69</td>
      <td>Soft shoe</td>
      <td>8</td>
    </tr>
    <tr>
      <td>Green shoe</td>
      <td>Best shoe for budget</td>
      <td>49</td>
      <td>hard shoe</td>
      <td>9</td>
    </tr>
    <tr>
      <td>Fire shoe</td>
      <td>For pros</td>
      <td>67</td>
      <td>hard shoe</td>
      <td>8.5</td>
    </tr>
    <tr>
      <td>Brown shoe</td>
      <td>Best shoe for budget</td>
      <td>34</td>
      <td>exterme hard shoe</td>
      <td>6</td>
    </tr>
    <tr>
      <td>Pro shoe</td>
      <td>For everyone</td>
      <td>98</td>
      <td>hard shoe</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Ultra shoe</td>
      <td>For everyone</td>
      <td>234</td>
      <td>soft shoe</td>
      <td>9.3</td>
    </tr>
    <tr>
      <td>Nike shoe</td>
      <td>For everyone</td>
      <td>54</td>
      <td>very soft shoe</td>
      <td>8</td>
    </tr>
    <tr>
      <td>Adidas shoe</td>
      <td>For the family</td>
      <td>78</td>
      <td>very soft shoe</td>
      <td>4</td>
    </tr>
    <tr>
      <td>Puma shoe</td>
      <td>For beginners</td>
      <td>98</td>
      <td>very soft shoe</td>
      <td>6</td>
    </tr>
    <!-- 补充2行数据凑够20行 -->
    <tr>
      <td>Test Shoe 1</td>
      <td>Sample Description</td>
      <td>100</td>
      <td>Soft shoe</td>
      <td>7.5</td>
    </tr>
    <tr>
      <td>Test Shoe 2</td>
      <td>Sample Description</td>
      <td>120</td>
      <td>Hard shoe</td>
      <td>8.2</td>
    </tr>
  </tbody>
</table>

说明 #

• 修正后的HTML结构清晰，每一行都被正确包裹，浏览器能准确识别行顺序。
• CSS通过tbody限定范围，确保表头不受奇偶色规则影响，仅针对数据行生效。

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