tr:nth-child(odd)选择器未按预期生效的原因咨询

嘿，这个问题的核心是你对CSS里:nth-child选择器的工作逻辑理解有偏差啦！

问题根源：:nth-child是基于父元素下所有子元素的位置计数 #

:nth-child(odd)的作用是：选中那些是父元素第奇数个子元素的目标元素——注意，这里的计数包含父元素下的所有类型子元素，不是只统计和目标元素同类型的。

看你的表格结构：

<table>
  <caption>caption</caption> <!-- 父元素的第1个子元素 -->
  <tr>...</tr> <!-- 父元素的第2个子元素 -->
  <tr>...</tr> <!-- 父元素的第3个子元素 -->
  <tr>...</tr> <!-- 父元素的第4个子元素 -->
  <tr>...</tr> <!-- 父元素的第5个子元素 -->
</table>

<caption>占了父元素的第1个位置，所以后续的<tr>的位置序号都被往后推了一位：

• 第一个<tr>（表头）是父元素的第2个子元素（偶数位），不匹配odd
• 第二个<tr>（数据行1）是父元素的第3个子元素（奇数位），理论上应该被选中
• 第三个<tr>（数据行2）是父元素的第4个子元素（偶数位），不匹配
• 第四个<tr>（数据行3）是父元素的第5个子元素（奇数位），理论上应该被选中

你说实际表现是第三个<tr>变红，大概率是序号数错了（比如把表头算成第1个tr，数据行1算第2个，以此类推），或者表头的<th>背景色覆盖了tr的样式（你的<th>设置了background-color: #31A9EE，会挡住tr的红色背景）。

满足你期望的解决方案 #

如果你想实现“表头无红色，数据行里的奇数行变红”的效果，有两种简单方法：

方法1：用:nth-of-type代替:nth-child

:nth-of-type(odd)会只统计父元素下的同类型元素（也就是只数<tr>），自动忽略<caption>：

table { border-collapse: collapse; color: #000000; width: 80%; }
td, th { border: 1px solid #000000; background-color: rgba(0, 0, 0, 0.3); text-align: center; padding: 3px; }
th { background-color: #31A9EE; }
/* 只在所有<tr>元素里选奇数位的 */
tr:nth-of-type(odd) { background: red; }

这个选择器会把表头的<tr>也选中，但因为<th>有自己的蓝色背景，所以看不到红色，最终效果和你期望的完全一致。

方法2：精准跳过表头，从数据行开始计数

如果你想明确排除表头，只给数据行的奇数行加背景，可以用:not(:first-child)配合:nth-of-type：

/* 排除第一个<tr>（表头），然后在剩下的<tr>里选奇数位 */
tr:not(:first-child):nth-of-type(odd) { background: red; }

效果验证 #

修改后就能实现你想要的结果：

• 表头<tr>：无红色（被<th>的蓝色背景覆盖）
• 第二个<tr>（数据行1）：背景变红
• 第三个<tr>（数据行2）：无红色
• 第四个<tr>（数据行3）：背景变红

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