:nth-child(n) 错位因按html子元素序号计数而非视觉列序，colspan会使后续单元格序号偏移；仅当表格无colspan/rowspan、每行单元格数一致且结构固定时才可靠；推荐用语义化class或colgroup辅助标记列。
用 :nth-child(n) 给表格列设背景色，为什么经常“错位”
因为 :nth-child(n) 数的是 HTML 中的子元素顺序，不是视觉上的“第 n 列”。一旦某行里有 colspan="2" 的 <td>，它只算 1 个子元素，但占了 2 列宽——后面所有 <code><td> 的序号全往后偏移一位。典型现象：你想标第 4 列，结果第 5 个 <code><td> 被染色；或者某列完全没反应。
<p>这不是浏览器 bug，是 CSS 选择器和表格语义的天然错配。哪怕你写了 <code>td:nth-child(4)，只要前面某行第 3 个单元格带 colspan="2"，那这一行的“第 4 个 <td>”其实是逻辑上的第 5 列。
<h3>什么时候 <code>:nth-child(n) 可以安全用
仅当满足全部条件时才可靠：
- 表格结构严格固定，无任何
colspan或rowspan - 所有行的
<td> / <code><th> 数量一致（包括表头） <li>没用 <code><colgroup></colgroup>或它里面没干扰样式（<col>本身不支持background-color） - 你控制得了 HTML 输出，比如后端模板或静态生成
示例（安全场景）：
table tr td:nth-child(3) { background-color: #fff8e1; }
这能稳定高亮每行的第 3 个单元格——前提是每行都真有且仅有 3 个 <td>，且无跨列。
<h3>有 <code>colspan 时真正靠谱的做法
放弃纯 CSS 列定位，改用语义化 class 标记：
- 给目标列的所有单元格统一加 class，比如
<th class="col-status"> 和 <code><td class="col-status"> <li>用 <code>.col-status { background-color: #e8f5e9; }直接命中 - 如果列动态生成，让 JS 或模板引擎在渲染时注入 class，而不是靠位置猜
- 避免用
tbody tr td:nth-child(3)这类组合去“绕过”表头——<th> 也在 <code>tr子元素里，照样被:nth-child计数这个方案不依赖 DOM 顺序，也不怕跨列，维护成本低，浏览器兼容性拉满。
<colgroup></colgroup>能不能救场不能直接设背景色，但可以辅助稳定列对齐：
-
<colgroup><col class="col-price"></colgroup>本身不响应background-color - 配合
table { border-collapse: collapse; }后，<col>的border或visibility可间接影响视觉边界 - 如果你非要靠
<col>控制样式，唯一可行路径是：用它设宽度 + 配合td[col-id="price"]这类自定义属性 + 属性选择器，但本质还是回归到“标记而非推断”
真正容易被忽略的一点：很多人试了
:nth-child不生效，第一反应是 selector 写错或优先级不够，其实问题根子在 HTML 结构本身——跨列一出现，位置选择器就失效，这时候硬调 CSS 只会浪费时间。 -
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
