如何使用CSS nth-child为指定表格行列（含rowspan场景）设置颜色

错误原因 #

你使用的td:nth-child(1)选择器逻辑是匹配每一行的第一个单元格，当单元格设置rowspan跨多行展示时，被跨的行就不存在第一个列的单元格，此时该行的第一个单元格会匹配到内容为B的列，就会出现错误染色的问题。同时纯CSS原生没有稳定的根据单元格内容匹配元素的能力，因此推荐以下两种落地成本极低的方案：

方案1：手动加类标记（最稳妥，零JS，入门友好） #

这种方案兼容性100%，不受rowspan/colspan影响，操作非常简单：

1. 替换原有CSS：

#promotion-popup table td.highlight {
    color: red;
}

2. 给所有内容为A的<td>标签加上class="highlight"属性即可，示例：

<td colspan="1" rowspan="2" class="highlight" style="height:20px; text-align:center; vertical-align:middle; width:232px">
  <p><span style="font-size:8px"><span style="font-family:Arial,Helvetica,sans-serif"><strong>A</strong></span></span></p>
</td>

方案2：JS自动识别（无需手动标记，适合表格内容多的场景） #

如果不想逐个手动加类，直接在页面底部加入以下几行JS代码即可，会自动识别所有内容为A的单元格设置颜色，自动兼容跨行场景：

document.querySelectorAll('#promotion-popup table tbody td').forEach(td => {
  if(td.textContent.trim() === 'A') {
    td.style.color = 'red';
  }
})

优化建议 #

建议把表头单独放在<thead>标签中，表格内容放在<tbody>标签中，从结构上区分表头和内容，可以完全避免误操作表头样式的问题。

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