第一行指表头（th）或首条数据行（第一个tr中的td），需据结构明确目标：改表头用th或thead th，改首数据行用tr:first-child td；注意浏览器默认样式覆盖、选择器权重及深色模式适配。
第一行指的是 th 还是第一个 tr？先搞清目标
很多人说“第一行”，实际要改的可能是表头（th）或首条数据行（第一个 tr 中的 td）。这两者默认样式不同：th 在多数浏览器里自带加粗+深色，容易误以为“改不了颜色”；而 tr:first-child td 才真正选中首行所有单元格。不明确这点，写再多 color 都可能白费。
- 要改表头文字颜色 → 用
th或更具体如table th - 要改首条数据行（不含表头）→ 用
tr:first-child td，但得确认第一行确实是tr而不是thead包裹的tr - 如果表格有
thead，那tr:first-child其实选中的是thead里的tr，不是你想象的“第一条数据行”
th 颜色设了没反应？大概率是被浏览器默认样式盖掉了
Chrome、Firefox 对 th 有内置样式，比如 color: -internal-light-dark(black, white)，它不是固定值，会随系统深色模式变。你写的 th { color: #e74c3c; } 如果没生效，开发者工具里看 computed color 值是否被划掉——划掉说明权重不够。
- 优先用更具体的选择器，比如
table.my-table th或thead th，别只写th - 避免直接用
!important，它会让后续覆盖变困难；真要用，也只在调试时临时加 - 检查是否漏写了
thead：如果表头被包在<thead><tr><th>...</th></tr></thead>里，那th本身就在thead内，单独写th可能被忽略
想只调第一列第一行那个单元格？用 tr:first-child th:first-child
精细控制单个格子时，靠类名最稳，但若结构固定又不想加 class，就得靠伪类组合。注意顺序和层级：
-
tr:first-child th:first-child→ 选中第一行第一个表头单元格 -
tr:first-child td:nth-child(2)→ 选中第一行第二个数据单元格（从左往右数第2列） - 别写成
th:first-child单独用——它会匹配所有行里第一个th，不止第一行 - 如果第一行混用
th和td（比如前两列是th，后面是td），:first-child仍按 DOM 顺序算，不是按“视觉列”
动态生成表格时，JS 设置颜色容易踩的坑
用 JS 给第一行加颜色，别直接改 element.style.color，尤其当 CSS 类已存在时，内联样式权重更高，后续切主题类会失效。
立即学习“前端免费学习笔记（深入）”；
- 推荐做法：给第一行加 class，比如
row-header，再在 CSS 里定义.row-header td, .row-header th { color: #34495e; } - 如果必须用 JS，用
classList.add()而非拼接字符串，避免覆盖已有 class - 注意渲染时机：表格由 JS 动态插入后，要等 DOM 真正挂载完再操作，否则
querySelector('tr:first-child')可能返回null - 深色模式下，硬编码 RGB 值（如
#000000）可能对比度不足，建议用color-scheme: light dark配合prefers-color-scheme媒体查询做适配
真正麻烦的从来不是“怎么写那行 CSS”，而是浏览器怎么解释它、JS 怎么介入它、以及换主题或适配深色模式时它还听不听话。多打开开发者工具看 computed 样式，比反复试错快得多。
