: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 列的方式。它作用于每个 内部的第 n 个 或 ，天然适配动态结构。

必须同时写 td 和 th，否则表头颜色不会变；如果表格有 和 分离，: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;
}

标签不能设背景色，别白费力气

元素在规范中明确不支持 background-color、color、font-size 等样式。你给它加了 background-color: red，浏览器会直接忽略——不是你写错了，是它根本没这个能力。

真正能用 控制的只有三样：width（稳定）、border（仅在 border-collapse: collapse 下对列边界起效）、visibility: collapse（隐藏整列）。

所以，想靠 实现列背景色，本质走不通；它适合控制列宽或隐藏列，别越界。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

动态列数变化时，:nth-child() 会失效

如果表格列数不固定（比如某行多一个 ，或用了 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' 时，会强制给 设内联 background-color，覆盖你的 :nth-child() 样式；Ant Design 的 column.render 如果返回带 style 的 JSX，也会压掉列级背景。

排查步骤：

• 先临时设 skin: 'default' 或关闭自定义 cellStyle
• 用浏览器开发者工具检查目标 ，确认最终生效的 background-color 来自哪条规则
• 必要时加 !important，但优先清理干扰源，而不是堆权重

动态表格的列样式，本质是“数据结构 → 渲染顺序 → CSS 选择器匹配”的链路，任何一环断裂，纯 CSS 就会失灵。别指望一个选择器通吃所有场景。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！