:nth-child(n) 是纯 CSS 动态选中表格第 n 列的唯一可靠方式，作用于每行内第 n 个 td 或 th，兼容 thead/tbody 分离结构，但需同时声明 td 和 th； 不支持背景色，列数不固定或含 colspan 时失效，须改用 JS 驱动。
用 :nth-child(n) 选中整列单元格最可靠
动态渲染的表格（比如 Vue/React 渲染、AJAX 加载后插入 DOM）没有固定 ID 或 class 标识列，:nth-child(n) 是唯一不依赖 JS 遍历、纯 CSS 就能锁定第 n 列的方式。它作用于每个 <tr> 内部的第 n 个 <code><td> 或 <code><th>，天然适配动态结构。
<p>必须同时写 <code>td 和 th，否则表头颜色不会变；如果表格有 <thead> 和 <code><tbody> 分离，<code>:nth-child() 仍按每行内顺序计数，不影响列定位。
常见错误：写成 tr:nth-child(1) td:nth-child(2) —— 这匹配的是“第 1 行的第 2 列”，不是“所有行的第 2 列”。
示例：
立即学习“前端免费学习笔记（深入）”；
table td:nth-child(2), table th:nth-child(2) {
background-color: #fff3cd;
}
<col> 标签不能设背景色，别白费力气
<col> 元素在规范中明确不支持 background-color、color、font-size 等样式。你给它加了 background-color: red，浏览器会直接忽略——不是你写错了，是它根本没这个能力。
真正能用 <col> 控制的只有三样：width（稳定）、border（仅在 border-collapse: collapse 下对列边界起效）、visibility: collapse（隐藏整列）。
所以，想靠 <colgroup><col></colgroup> 实现列背景色，本质走不通；它适合控制列宽或隐藏列，别越界。
动态列数变化时，:nth-child() 会失效
如果表格列数不固定（比如某行多一个 <td>，或用了 <code>colspan），:nth-child(3) 可能错位到别的列上。这时必须放弃纯 CSS，改用 JS 驱动：
- 遍历
table.rows，对每行的cells[n]手动加 class - 监听数据更新后重跑一次着色逻辑（比如 Vue 的
watch或 React 的useEffect） - 避免用
querySelectorAll('tr td:nth-child(3)')后统一操作——它无法跳过colspan占位导致的错位
关键点：列序号得从数据结构里算，不能只看 DOM 子元素位置。
第三方表格库（如 Layui、Ant Design）要绕开皮肤和 cellStyle 干扰
Layui 开启 skin: 'line' 时，会强制给 <tr> 设内联 <code>background-color，覆盖你的 :nth-child() 样式；Ant Design 的 column.render 如果返回带 style 的 JSX，也会压掉列级背景。
排查步骤：
- 先临时设
skin: 'default'或关闭自定义cellStyle - 用浏览器开发者工具检查目标
<td>，确认最终生效的 <code>background-color来自哪条规则 - 必要时加
!important，但优先清理干扰源，而不是堆权重
动态表格的列样式，本质是“数据结构 → 渲染顺序 → CSS 选择器匹配”的链路，任何一环断裂，纯 CSS 就会失灵。别指望一个选择器通吃所有场景。
