使用 tr:nth-child(odd) 和 tr:nth-child(even) 可实现表格奇偶行不同背景色，提升可读性；其中 odd 对应 2n+1 选奇数行，even 对应 2n 选偶数行，建议限定在 tbody 内使用以避免表头干扰，现代浏览器广泛支持，旧版 IE 需降级处理，还可扩展为 3n+1 等模式实现周期性配色。
在网页表格或列表中，为了让内容更易读，常常需要对奇数行和偶数行使用不同的背景色。这可以通过CSS中的 :nth-child 选择器轻松实现。下面详细介绍如何使用 tr:nth-child(odd) 和 tr:nth-child(even) 来设置交替行样式。
基本语法与工作原理
:nth-child() 是一个功能强大的CSS伪类选择器，它可以根据元素在其父容器中的位置来选择特定的子元素。对于表格中的 tr（表格行），我们可以利用它来区分奇数行和偶数行。
常用写法：tr:nth-child(odd)：匹配所有处于奇数位置的 tr 元素（如第1、3、5行） tr:nth-child(even)：匹配所有处于偶数位置的 tr 元素（如第2、4、6行）
这些关键字是CSS内置的，也可以用公式形式表示，比如 2n+1 等同于 odd，2n 等同于 even。
实际应用示例
以下是一个简单的HTML表格结构：
立即学习“前端免费学习笔记（深入）”；
| 张三 | 85分 |
| 李四 | 92分 |
| 王五 | 78分 |
| 赵六 | 96分 |
添加如下CSS样式即可实现隔行变色：
AI Humanize
使用AI改写工具，生成不可被AI检测的文本内容
154 查看详情
tr:nth-child(odd) { background-color: #f0f0f0;}tr:nth-child(even) { background-color: #ffffff;}
这样页面上的表格就会呈现出清晰的条纹效果，提升可读性。
注意事项与兼容性
虽然 :nth-child 在现代浏览器中支持良好，但仍需注意几点：
计数从1开始，即第一行是“第1个子元素”，属于 odd 如果表格中有其他类型的行（如 thead 中的 tr），会影响计数顺序。建议将样式限定在 tbody 内部使用，避免头部行被误选 推荐写法：tbody tr:nth-child(odd)，确保只对数据行生效 旧版IE（IE8及以下）不支持 :nth-child，若需兼容老浏览器，可考虑JavaScript辅助或直接添加class类名
扩展用法：自定义周期性样式
除了奇偶行，还可以实现更复杂的间隔模式。例如每3行一循环：
tr:nth-child(3n + 1) { background-color: #e0f7fa;}tr:nth-child(3n + 2) { background-color: #fff8e1;}tr:nth-child(3n + 3) { background-color: #f3e5f5;}
这种技巧适用于日历、排班表等需要周期性视觉区分的场景。
基本上就这些。掌握 :nth-child(odd) 和 :nth-child(even) 能让你快速实现美观的表格样式，无需额外HTML标记，简洁高效。
以上就是如何用CSS选择器实现交替行样式_tr:nth-child技巧详解的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/968214.html
微信扫一扫 
支付宝扫一扫 
