CSS中:first-child与nth-child用法解析

CSS伪类选择器`:first-child`和`:nth-child()`在表格样式控制中扮演重要角色。`:first-child`常用于选中表格每行的首个单元格，例如加粗首列文字，突出显示重要信息。`:nth-child(n)`则能按位置精确选择单元格，实现隔列变色、指定列样式等效果，提升表格可读性。使用时需注意，这两个选择器基于父元素子节点顺序计数，若`

:first-child和:nth-child可用于精确控制表格样式。前者选中每行首个单元格，常用于加粗首列；后者按位置选择，可实现隔列变色或指定列样式。需注意两者均基于父元素子节点顺序计数，若tr内混用th与td可能导致错位。推荐组合使用，如tr:first-child td设置表头样式，td:nth-child(even):not(:first-child)为非首列偶数列添加背景色，提升表格可读性与维护性。

在表格（table）中使用 CSS 伪类 :first-child 和 :nth-child() 可以帮助我们更灵活地控制特定单元格或行的样式，而无需添加额外的类名。下面介绍它们在表格中的实际应用方式和注意事项。

:first-child：选中第一个子元素

:first-child 用于选中父元素下的第一个子元素。在表格中，它常用于：

• 设置第一列的特殊样式（如加粗、缩进等）
• 为第一行（如表头）中的第一个单元格添加边框或背景色

例如，让表格每一行的第一个单元格文字加粗：

注意：该选择器作用的是每行中第一个 td 或 th，不是整个表格的第一个单元格。

:nth-child(n)：按位置选中子元素

:nth-child(n) 更强大，可以根据位置选择元素。在表格中常见用途包括：

• 设置隔列变色（类似斑马线效果）
• 选中特定列进行样式调整（如第3列统一右对齐）
• 突出显示关键数据列

例如，让表格的第2列文字变为蓝色：

再比如，实现隔一列变色的效果：

需要注意的是，:nth-child() 是基于父元素的所有子元素来计数的。如果 tr 中混用了 th 和 td，计数会包含所有单元格，可能导致选择错位。

结合使用场景建议

在实际开发中，可以组合这些伪类提升表格可读性：

• 用 tr:first-child td 给表头行的所有单元格加背景色
• 用 td:nth-child(odd) 实现列级交替样式
• 配合 :not(:first-child) 排除首列，避免格式混乱

例如，只对非首列的偶数列添加浅灰背景：

基本上就这些。合理使用 :first-child 和 :nth-child() 能让表格样式更清晰、维护更方便，关键是理解它们是基于“父元素内子元素的位置”来匹配的。

好了，本文到此结束，带大家了解了《CSS中:first-child与nth-child用法解析》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！