# CSS如何设置表格第一行颜色 在网页设计中，表格（table）是展示结构化数据的常用元素。通过CSS可以轻松控制表格样式，其中设置首行特殊颜色是提升可读性和美观度的常见需求。本文将详细介绍5种实现方法。 ## 方法一：使用`:first-child`伪类 ```css /* 选择第一个tr元素设置背景色 */ tr:first-child { background-color: #f8d7da; } 原理：
:first-child伪类选择器匹配父元素的第一个子元素。在表格中，第一个<tr>通常是表头行。
注意事项：
- 如果表格使用<thead>标签，需要改为thead tr - 兼容性：IE9+
:nth-child()伪类/* 选择第一行（索引为1） */ tr:nth-child(1) { background-color: #d4edda; } 优势：
- 可以精确控制任意行（如:nth-child(odd)设置奇数行） - 支持复杂公式如:nth-child(3n+1)
<th>元素如果第一行是表头单元格：
th { background-color: #cce5ff; color: #004085; } <thead>结构化标签推荐的标准写法：
<table> <thead> <tr><th>姓名</th><th>年龄</th></tr> </thead> <tbody>...</tbody> </table> thead tr { background-color: #e2e3e5; } 优点：
- 语义化更好 - 方便单独设置表头样式
<tr style="background-color: #fff3cd;"> <td>...</td> </tr> 适用场景：
- 需要动态设置样式时 - 但应优先考虑外部CSS
<!DOCTYPE html> <html> <head> <style> /* 方法1+2组合使用 */ table { border-collapse: collapse; width: 100%; } tr:first-child, tr:nth-child(1) { background-color: #d1ecf1; font-weight: bold; } td, th { padding: 8px; border: 1px solid #ddd; } </style> </head> <body> <table> <tr><th>项目</th><th>数值</th></tr> <tr><td>数据1</td><td>100</td></tr> </table> </body> </html> :first-child而非:nth-childtable { tr:first-child { @include highlight-row(#f8f9fa); } } :root { --table-header-bg: #e9ecef; } thead tr { background: var(--table-header-bg); } 通过以上方法，可以灵活实现表格首行的样式定制，建议优先选择语义化HTML结合CSS伪类选择器的方案。 “`
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
