td:first-child 不生效是因为它要求 td 必须是父元素的第一个子元素，而表格中常因 thead/th、换行文本节点或嵌套结构导致 td 并非首子节点；应改用 tbody td:first-child 精准定位数据区首列。
td:first-child 为什么有时不生效
直接写 td:first-child { background: red; } 却没效果，大概率是因为选择器权重不够，或者 HTML 结构里 td 前面混了 th。比如表格有表头行（thead）和数据行（tbody），thead th 是首列但不是 td，所以 td:first-child 根本选不到它；而 tbody tr td:first-child 才真正命中数据区首列。
常见错误现象：
– 第一列颜色只在部分行生效
– 表头列没变色，但数据列变了
– 加了 !important 才勉强起作用（说明权重冲突）
- 务必限定作用域：用
tbody td:first-child或table.my-table tbody td:first-child - 如果表头也要统一着色，单独加
thead th:first-child - 避免用
* td:first-child这类泛匹配，容易误伤嵌套表格
如何让首列颜色随行变化
想实现“第1行首列蓝、第2行绿、第3行橙”，不能只靠 :first-child，得结合 :nth-child(n) 定位具体行再锁定首列单元格。
使用场景：会议日程表、带状态标识的报表、优先级排序列表
- 写法是
tr:nth-child(1) td:first-child，不是tr:first-child td:first-child（后者只对第一行有效） - 注意
tr:nth-child(n)计数的是整个tbody内的tr，如果有隐藏行或动态插入，序号会偏移 - 若表格含
colgroup或caption，不影响tr的计数，但会影响视觉对齐，建议先检查 DOM 结构
固定颜色但不破坏 sticky 首列定位
当同时用 position: sticky 固定首列时，td:first-child 设置背景色必须搭配 background-color 显式声明，否则滚动中会出现内容透出或闪烁。
性能影响：sticky 元素若没设背景，浏览器无法做图层合成优化，卡顿明显；z-index 若为 auto，首列可能被右侧 sticky 表头遮盖
- 必须写
tbody td:first-child { position: sticky; left: 0; background-color: #f8f9fa; z-index: 1; } - 左上角单元格（
thead th:first-child）要叠加top: 0; left: 0; z-index: 3;，否则会被覆盖 - 禁止给父容器加
transform、filter、will-change，它们会切断 sticky 的滚动上下文
兼容性与 fallback 方案
:first-child 本身兼容所有现代浏览器，包括 IE9+，但实际失效常源于结构误判或祖先样式污染。
容易被忽略的地方：表格用了 border-collapse: collapse 时，首列边框可能被相邻列“吃掉”，看起来像颜色没铺满；另外，white-space: nowrap 若未配合设置，长文本撑开单元格也会让背景色显得不连续
- 加一层兜底：用
tbody td:first-child, tbody th:first-child覆盖可能的th场景 - 检查是否被
table { background }或tr { background }层叠覆盖 - 移动端需额外测试 iOS Safari —— 它对 sticky + first-child 组合的渲染偶有延迟，加
backface-visibility: hidden可缓解
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
