如何避免斑马纹样式覆盖表格末尾三行的背景色？

结论

斑马纹规则的选择器优先级高于 .insert-row td，因此 .insert-row td 设置的背景色会被覆盖。可以给插入行使用带表格 ID 的选择器，例如 #financial_data_table tr.insert-row td：

#financial_data_table tr.insert-row td {
    background-color: #ede7d3;
}

这个选择器的优先级高于 table tr:nth-child(odd) td 和 table tr:nth-child(even) td，插入行因此会显示为 #ede7d3。如果样式表后面还有优先级相同的规则，则由后声明的规则生效。

为什么原来的规则会覆盖背景色

原样式用 .insert-row td 为插入行的单元格设置背景色，斑马纹规则则按行的位置设置颜色：

.insert-row td {
    background-color: #ede7d3;
}

table tr:nth-child(odd) td {
    background-color: #f6ffda;
}

table tr:nth-child(even) td {
    background-color: #bfdeb9;
}

.insert-row td 的优先级低于带有 :nth-child() 的选择器。因此，即使插入行带有 insert-row 类，斑马纹规则仍可能决定单元格最终显示的颜色。table tr:first-child td 也会为第一行的单元格设置背景色。

推荐写法

使用表格 ID 和行类名限定规则范围，避免影响其他表格：

#financial_data_table tr.insert-row td {
    background-color: #ede7d3;
}

如果要保留原有的奇偶行颜色，只覆盖插入行，这条规则就够了。若样式表中还有优先级相同或更高的规则，可以把它放在那些规则之后，或检查是否有其他选择器覆盖了该单元格。

检查表格 HTML 结构

示例将 div 和 form 放在 table 内，并用它们包裹 tr。这不是有效的表格结构。浏览器解析时可能会自动调整节点位置，使实际 DOM 与源代码中的结构不同。建议把表单放在表格外，或将表单控件放进表格单元格；表格行则直接放在 tbody 内，例如：

<table id="financial_data_table" class="sortable">
  <tbody>
    <tr class="insert-row">
      <td><input id="post_date" name="post_date" type="text"></td>
      <td><input id="num" name="num" type="text"></td>
      <td><input id="description" name="description" type="text"></td>
    </tr>
  </tbody>
</table>

另外，原规则 div gnucash_account_insert_new_data td 会选择 div 内名为 gnucash_account_insert_new_data 的元素，不会匹配 id="gnucash_account_insert_new_data"。如果目标是这个 ID，应写成 #gnucash_account_insert_new_data。不过，针对这三行，直接使用 .insert-row 规则更明确。

备注：内容仅供参考。