问题源头：为何 CSS 表格行隔行变色不生效
常见原因一：选择器作用域与分组元素
最常见的问题是作用域不对，导致 tr:nth-of-type 的计数并非从整张表开始，而是受 thead、tfoot、tbody 等分组的影响。因此，当你在 thead 或 tfoot 里使用了相同的选择器时，可能出现隔行颜色在主体部分不生效的情况。
此外，如果样式被其他规则覆盖，如更高优先级的选择器、行内样式、或 CSS 框架的通用样式，隔行变色可能被覆盖而看起来像不起作用。在排查时要注意选择器的优先级与载入顺序。
常见原因二：nth-child 与 nth-of-type 的差异
很多开发者在实现隔行变色时错误地使用了 nth-child，但在表格结构中 nth-child 会把所有子元素逐一计数，而不区分标签名称，这在复杂的表格结构中容易造成错位。
使用 nth-of-type 可以按标签类型计数，确保仅对 tr 行起作用，而不是对所有子元素生效。换言之，tbody 下的 tr 才会被计数，从而实现正确的隔行着色。
常见原因三：表格结构的嵌套与分组
若表格包含多层分组，如嵌套的 tbody、thead、tfoot，或在同一表格中混合多个 thead 与 tbody，就容易导致计数从新的分组重新开始。
因此，在确定实现方式时，尽量把样式限定在 tbody 下的行，避免意外作用到头部或尾部区域。
解决方案：教你用 nth-of-type 选择器实现隔行样式
基础实现思路
要确保隔行变色只作用在主体数据行上，优先选择对 tbody 下的 tr，并使用 :nth-of-type 来实现奇偶行的分组样式。
示例核心点：避免对 thead、tfoot 以及其他分组产生干扰；确保样式在对 tbody 的行进行计数后再设定背景色。
基础代码示例：使用 tbody 的偶奇行
下面的 CSS 通过 tbody tr:nth-of-type(odd) 与 tbody tr:nth-of-type(even) 分别设置奇偶行背景色，达到稳定的隔行变色效果。
/* 基础：仅作用于 tbody 的行 */
tbody tr:nth-of-type(odd) { background-color: #f5f5f5; }
tbody tr:nth-of-type(even) { background-color: #ffffff; }注意：如果你的表格结构中对行有额外的父容器样式或某些框架的样式干扰，可以进一步限定选择器为 table tbody，以提高稳定性。
完整示例：HTML 结构与 CSS 配置
以下示例展示了一个带有 thead 与 tbody 的表格结构，配合上述规则实现稳定的隔行变色效果。
<table class="data-table"><thead><tr><th>编号</th><th>名称</th><th>值</th></tr></thead><tbody><tr><td>1</td><td>A</td><td>100</td></tr><tr><td>2</td><td>B</td><td>200</td></tr><tr><td>3</td><td>C</td><td>300</td></tr></tbody>
</table>高级技巧与注意事项
兼容性要点：处理跨浏览器的差异
主流浏览器对 nth-of-type 的支持较为一致，但在某些老旧浏览器上仍可能存在兼容性问题。因此，在关键场景中可以作为首选实现方式，必要时再提供回退方案。
另一个要点是 表格渲染模式，在 border-collapse: collapse 与 border-collapse: separate 两种模式下，背景色的覆盖行为可能略有不同，需要结合实际布局测试。
回退与兼容的替代方案
如果你必须向后兼容且无法使用 nth-of-type，可以考虑在 td 上应用背景色，配合一致的单元格宽度与对齐规则，但这需要逐个列单元格应用样式，工作量较大且易出错。
另外，诸如 CSS 变量、框架自带的 zebra 样式组件，或 JavaScript 动态添加样式的方案，也是在复杂场景下的替代路径，但应确保性能与可维护性。
