CSS表格行色设置：first-child与nth-child应用技巧
时间：2026-01-12 19:51:43 394浏览 收藏
知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《CSS表格样式：使用 :first-child 和 :nth-child 设置行色效果》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！
:first-child在表格中常不生效，因tr父元素是tbody，而tbody内首个tr未必是其第一个子元素；应显式写tbody、用:nth-child(1)或thead tr等更可靠选择器。
为什么 :first-child 在表格里经常不生效
因为 实操建议： 常见错误现象：想给每行第一列加粗，却写了 实操建议： IE8 不支持 性能影响很小，但 DOM 结构稍有变化（比如 JS 动态插入 实操建议： 今天关于《CSS表格行色设置：first-child与nth-child应用技巧》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！ 的父元素是 （浏览器自动补全），而 :first-child 匹配的是「其父元素的第一个子元素」。如果 HTML 中写了 ，那 里的第一个 就不是整个 的第一个子元素，更不是
的第一个子元素——除非你确认 是直接子容器且里面没注释、文本节点或空格。
标签，避免浏览器解析歧义
:nth-child(1) 替代 :first-child，它按位置计算，不依赖“是否为第一个子节点”thead tr 更可靠:nth-child(n) 对 和 的行为差异
:nth-child 总是相对于**同一父级下的同级兄弟元素**计数。对 来说，它在 或 内计数；对 来说，它在单个 内计数——这点极易混淆。
td:nth-child(1)，结果发现 也被算进去了，导致错位。
td:nth-child(1) 前，确保该行没有 ；否则改用 td:first-of-type 或限定选择器如 tr td:nth-child(1)
tbody tr:nth-child(odd) 和 tbody tr:nth-child(even)，别漏掉 tbody 限定:nth-child(2n) 等价于 :nth-child(even)，但可读性差，建议优先用语义化关键字设置首行/首列样式时容易忽略的兼容性与结构陷阱
:nth-child，如果你必须兼容，得用 class 手动标记（如 class="first-row"）；现代项目中更常见的问题是「样式被内联样式或更具体的选择器覆盖」。 时没清空原有内容）， :nth-child 就会套错行。
role="grid" 并配合 ARIA 属性，比纯 CSS 伪类更利于可访问性:nth-child 会在内层 上重复触发，造成意外样式叠加
tbody tr:nth-child(odd) {
background-color: #f9f9f9;
}
tbody tr:nth-child(even) {
background-color: #ffffff;
}
tbody tr:first-child td {
font-weight: bold;
border-top: 2px solid #333;
}
td:nth-child(1) {
font-weight: 600;
width: 120px;
}
表格样式真正难的不是写对伪类，而是当后端返回动态列、前端又用 JS 补充合计行时，:nth-child 的序号完全不可控。这时候就得切回 class 控制，或者用 :has()（但注意它目前仅 Chromium 118+ 支持）。
