带<th>标签的HTML表格首行是否为行0？nth-child样式异常咨询

先直接给你结论：带有<th>的表格第一行不是行0，CSS的:nth-child()伪类是从1开始计数的。你遇到的问题不是计数从0开始导致的，而是表格结构和选择器作用范围的问题。

具体分析你的情况 #

你写的样式.t01 tr:nth-child(even)和.odd是针对所有.t01下的<tr>元素的，但如果你的表格用了语义化的<thead>和<tbody>标签（这是推荐的规范写法），那么表头行和数据行是分属不同父元素的：

• <thead>里的表头<tr>是<thead>的第1个子元素，会被:nth-child(odd)选中，显示白色；
• <tbody>里的第一行数据是<tbody>的第1个子元素，同样会被:nth-child(odd)选中，也显示白色；
• 只有<tbody>里的第二行数据（<tbody>的第2个子元素）才会被:nth-child(even)选中，显示红色。

这就是为什么你看到首行和第二行都是白色的核心原因——它们在各自的父容器里都是奇数位置的<tr>。

解决方法 #

如果你只想给数据行设置奇偶样式，让表头不受影响，修改CSS，把选择器限定在<tbody>内即可：

.t01 tbody tr:nth-child(even) { color: red; }
.t01 tbody tr:nth-child(odd) { color: white; }

这样表头行不会被这些样式干扰，<tbody>里的数据行就会按照1、2、3...的顺序正确应用奇偶样式了。

如果非要把表头行也算进整个表格的奇偶计数里（不推荐，不符合语义化规范），可以去掉<thead>标签，把表头行和数据行都放在同一个<tbody>里，这样所有<tr>都属于同一个父元素，计数就会从表头行开始按1、2、3...依次计算。

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