使用 nth-child 选择器结合 rgba() 可优化表格隔行变色效果，通过调整透明度增强可读性：table tr:nth-child(even) 设置浅灰黑半透明背景（如 rgba(0,0,0,0.05)），odd 行保持白底；深色背景可用 rgba(255,255,255,0.06)，强调区分可用带色调如 rgba(66,133,244,0.1)；hover 时提升至 rgba(0,0,0,0.1) 改善交互，兼顾响应式与可访问性对比度要求。
表格隔行变色时，如果颜色对比太弱导致可读性差，可以利用 nth-child 选择器结合 rgba() 来调整背景色的透明度，增强视觉区分度又不破坏整体美观。
使用 nth-child 区分奇偶行
通过 :nth-child(odd) 和 :nth-child(even) 可以轻松选中表格的奇数行和偶数行。配合 rgba 颜色值，能实现半透明着色，让底色自然融合页面背景，同时提升对比层次。
示例代码：
table tr:nth-child(even) {
background-color: rgba(0, 0, 0, 0.05); /* 浅灰黑，轻微透明 */
}
table tr:nth-child(odd) {
background-color: rgba(255, 255, 255, 1); /* 白底 */
}
调整 rgba 透明度获得理想对比
rgba 的第四个参数是透明度（alpha 值），控制在 0.05 到 0.15 之间通常既能突出隔行效果，又不会显得突兀。可以根据表格字体颜色、背景环境微调。
建议尝试值：- 浅色背景表格：rgba(0, 0, 0, 0.08)
- 深色背景表格：rgba(255, 255, 255, 0.06)
- 强调区分感：rgba(66, 133, 244, 0.1)（带色调）
兼顾可访问性与响应式显示
在小屏幕上，表格可能压缩显示，过重的底色会影响阅读。使用 rgba 能保持轻盈感。同时确保文字与背景的对比度符合可访问标准（至少 4.5:1）。
立即学习“前端免费学习笔记（深入）”；
小技巧：可以给鼠标悬停行添加稍明显的背景色，进一步提升交互体验：
table tr:hover {
background-color: rgba(0, 0, 0, 0.1);
}
基本上就这些，用好 nth-child 搭配 rgba，隔行着色既清晰又柔和。
