使用 tr:first-child 或 thead 配合 font-weight 是实现表格首行加粗的推荐方式,兼容性更好且无需修改HTML结构。

要让CSS表格的首行文字加粗,可以使用伪类 ::first-row 配合 font-weight 属性来实现。这种方法简洁高效,适用于HTML中的 table 元素。
使用 ::first-row 伪元素
在CSS中,::first-row 可以选中表格第一行的所有单元格(无论是表头th 还是数据单元格 td)。通过为这些单元格设置 font-weight,即可实现加粗效果。
示例代码:
table::first-row {
font-weight: bold;
}
这样,表格的第一行所有内容都会显示为粗体,无需额外添加类名或修改HTML结构。
注意兼容性和实际表现
虽然 ::first-row 在规范中有定义,但目前主流浏览器对它的支持有限。更稳定的方式是使用 tr:first-child 或 tr:first-of-type 来选择第一行。推荐写法(兼容性更好):
立即学习“前端免费学习笔记(深入)”;
table tr:first-child {
font-weight: bold;
}
如果表格中使用了 thead,也可以更明确地针对表头:
thead tr {
font-weight: bold;
}
总结
尽管::first-row 看似直观,但在实际项目中建议使用 tr:first-child 或语义化的 thead 配合CSS控制样式,确保跨浏览器一致性。基本上就这些,不复杂但容易忽略细节。










