: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
用于选中父元素下的第一个子元素。在表格中，它常用于：
- 设置第一列的特殊样式（如加粗、缩进等）
- 为第一行（如表头）中的第一个单元格添加边框或背景色
例如，让表格每一行的第一个单元格文字加粗：
table td:first-child {
font-weight: bold;
}
注意：该选择器作用的是每行中第一个
td
或
th
，不是整个表格的第一个单元格。
立即学习“前端免费学习笔记（深入）”；
:nth-child(n)：按位置选中子元素
:nth-child(n)
更强大，可以根据位置选择元素。在表格中常见用途包括：
- 设置隔列变色（类似斑马线效果）
- 选中特定列进行样式调整（如第3列统一右对齐）
- 突出显示关键数据列
例如，让表格的第2列文字变为蓝色：
table td:nth-child(2) {
color: blue;
}
再比如，实现隔一列变色的效果：
table td:nth-child(even) {
background-color: #f9f9f9;
}
需要注意的是，
:nth-child()
是基于父元素的所有子元素来计数的。如果
tr
中混用了
th
和
td
，计数会包含所有单元格，可能导致选择错位。
结合使用场景建议
在实际开发中，可以组合这些伪类提升表格可读性：
- 用
tr:first-child td
给表头行的所有单元格加背景色
- 用
td:nth-child(odd)
实现列级交替样式
- 配合
:not(:first-child)
排除首列，避免格式混乱
例如，只对非首列的偶数列添加浅灰背景：
table td:nth-child(even):not(:first-child) {
background-color: #eee;
}
基本上就这些。合理使用
:first-child
和
:nth-child()
能让表格样式更清晰、维护更方便，关键是理解它们是基于“父元素内子元素的位置”来匹配的。