最直接有效的方式是用 tr:first-child，但需确保html结构规范；更稳妥的是将表头放入并样式化thead tr；显式添加.header-row类最灵活可靠；表头单元格应优先使用以提升语义与可访问性。
表格首行单独设置样式，最直接有效的方式就是用 tr:first-child 选择器，但要注意它是否真的选中了你想要的“表头行”——这取决于你的 HTML 结构是否规范。
确认表头写在
里更稳妥
如果表格结构清晰，把标题行放在 <thead> 中，再对 <code>thead tr 设置样式，语义正确、兼容性好、不易误伤：
table thead tr { background-color: #f0f8ff; font-weight: bold; }
tr:first-child 在简单表格中可用但有陷阱
当表格没有 <thead>，只有纯 <code><tr><td> 时，<code>tr:first-child 确实能选中第一行。但需注意：
- 如果表格开头有隐藏行（如
style="display:none" 的 <tr>），它仍会被算作第一个子元素，导致样式错位 <li>动态插入行后，<code>:first-child 不会自动重新匹配逻辑上的“标题行”
- 若第一行实际是空行或工具行（如筛选栏），就不是真正意义上的表头
用 class 显式标记表头行最灵活可靠
不依赖结构顺序，给表头行加一个明确的类名（如 class="header-row"），css 写法直观、易维护、无歧义：
立即学习“前端免费学习笔记（深入）”；
<tr class="header-row"> <th>姓名</th> <th>年龄</th> </tr> .header-row { background: #e6f7ff; color: #1890ff; }
补充：th 默认比 td 更适合做表头
即使不用 <thead>，也建议表头单元格用 <code><th> 而非 <code><td>。它自带加粗、居中等默认样式，语义清晰，还支持屏幕阅读器识别： <ul> <li> <code>th 默认 font-weight: bold 和 text-align: center
- 可配合
th:first-child 或 th:last-child 做列级微调
- 与
scope 属性结合，提升可访问性
<thead> 中，再对 <code>thead tr 设置样式，语义正确、兼容性好、不易误伤： table thead tr { background-color: #f0f8ff; font-weight: bold; }<thead>，只有纯 <code><tr><td> 时，<code>tr:first-child 确实能选中第一行。但需注意： style="display:none" 的 <tr>），它仍会被算作第一个子元素，导致样式错位 <li>动态插入行后，<code>:first-child 不会自动重新匹配逻辑上的“标题行”用 class 显式标记表头行最灵活可靠
不依赖结构顺序，给表头行加一个明确的类名（如 class="header-row"），css 写法直观、易维护、无歧义：
立即学习“前端免费学习笔记（深入）”；
<tr class="header-row"> <th>姓名</th> <th>年龄</th> </tr> .header-row { background: #e6f7ff; color: #1890ff; }
补充：th 默认比 td 更适合做表头
即使不用 <thead>，也建议表头单元格用 <code><th> 而非 <code><td>。它自带加粗、居中等默认样式，语义清晰，还支持屏幕阅读器识别： <ul> <li> <code>th 默认 font-weight: bold 和 text-align: center
th:first-child 或 th:last-child 做列级微调scope 属性结合，提升可访问性