tr:first-child 能精准选中表格第一行，因为它匹配 table 直接子元素中首个 tr，无论是否在 thead 中；若需仅作用于 tbody 首行则用 tbody tr:first-child；IE9+ 原生支持，旧版可加 class 降级兼容。
直接用 tr:first-child 就能精准选中表格第一行，无需改动 HTML 结构，也不依赖 class 或 id。
它匹配的是 <table> 直接子元素中第一个 <code><tr>，不管这行是表头（<code><thead> 里的）还是普通数据行——只要它是整个表格里最上面那条 <code><tr>，就命中。
<p>注意：如果表格有 <code><caption></caption> 或其他非 <tr> 元素在最前，<code>tr:first-child 仍会找第一个 <tr>，不受影响。
<h3>常见写法与关键细节</h3>
<p>样式写在 <code>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>，且你想只样式化 <code><tbody> 的第一行，改用 <code>tbody tr:first-child
IE9+ 原生支持 :first-child，现代浏览器完全没问题。若需兼容极旧环境（如 IE7/8），可退而求其次，在首行 <tr> 上加个 class（如 <code>class="header-row"），但前提是“结构不可改”不包括加 class——多数场景下，加一个 class 不算破坏结构。
如果真连 class 都不能加，tr:first-child 仍是当前最优解，无需 JS 或额外 wrapper。
基本上就这些，不复杂但容易忽略细节。
以上就是css表格首行需要设独立样式但结构不可改怎么办_利用 tr:first-child 伪类控制首行的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
393
收藏
