tr:first-child 能精准选中表格第一行,因为它匹配 table 直接子元素中首个 tr,无论是否在 thead 中;若需仅作用于 tbody 首行则用 tbody tr:first-child;IE9+ 原生支持,旧版可加 class 降级兼容。

直接用 tr:first-child 就能精准选中表格第一行,无需改动 HTML 结构,也不依赖 class 或 id。
为什么 tr:first-child 有效
它匹配的是 <table> 直接子元素中第一个 <tr>,不管这行是表头(<thead> 里的)还是普通数据行——只要它是整个表格里最上面那条 <tr>,就命中。
注意:如果表格有 <caption> 或其他非 <tr> 元素在最前,tr:first-child 仍会找第一个 <tr>,不受影响。
常见写法与关键细节
样式写在 tr:first-child 上,但真正起作用的通常是它的后代单元格:
立即学习“前端免费学习笔记(深入)”;
-
设整行背景/字体加粗:
tr:first-child { background: #f5f5f5; font-weight: bold; } -
单独控制首行单元格内边距或文字对齐:
tr:first-child td, tr:first-child th { padding: 12px 8px; text-align: center; } -
避免误中 thead 中的 tr:如果表格用了
<thead>,且你想只样式化<tbody>的第一行,改用tbody tr:first-child
兼容性与稳妥写法
IE9+ 原生支持 :first-child,现代浏览器完全没问题。若需兼容极旧环境(如 IE7/8),可退而求其次,在首行 <tr> 上加个 class(如 class="header-row"),但前提是“结构不可改”不包括加 class——多数场景下,加一个 class 不算破坏结构。
如果真连 class 都不能加,tr:first-child 仍是当前最优解,无需 JS 或额外 wrapper。
基本上就这些,不复杂但容易忽略细节。










