: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列文字变为蓝色：
音疯
音疯是昆仑万维推出的一个AI音乐创作平台，每日可以免费生成6首歌曲。
146 查看详情 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()
能让表格样式更清晰、维护更方便，关键是理解它们是基于“父元素内子元素的位置”来匹配的。
以上就是css伪类:first-child和nth-child在表格中的应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1062863.html
微信扫一扫 
支付宝扫一扫 
