使用:nth-child区分奇偶行并设置不同渐变背景，配合transition实现悬停平滑过渡，提升表格视觉层次与交互体验，适用于现代浏览器。
要实现CSS表格中奇偶行具有不同背景渐变色，并支持鼠标悬停时平滑过渡，可以结合使用 :nth-child 和 transition 属性。这种方法无需额外的类名，样式完全由CSS控制，简洁且易于维护。
使用 :nth-child 区分奇偶行
通过 :nth-child(odd) 和 :nth-child(even) 可以精准选择表格中的奇数行和偶数行。为它们分别设置不同的线性渐变背景，使视觉层次更清晰。- tr:nth-child(odd)：匹配所有奇数行（1、3、5...）
- tr:nth-child(even)：匹配所有偶数行（2、4、6...）
- 渐变方向可设为水平（to right）或垂直（to bottom），根据设计需求调整
添加 transition 实现悬停动画
为 tr 元素添加 transition 属性，可以让背景色在鼠标移入移出时平滑变化，提升交互体验。- 设置 transition: background 0.4s ease 可使渐变背景缓慢过渡
- 在 :hover 状态下覆盖当前背景为高亮渐变色
- 使用 !important 确保悬停样式优先级更高（尤其在动态加载内容时）
完整示例说明
下面是一个完整的表格结构示例：| 姓名 | 年龄 | 城市 |
|---|---|---|
| 张三 | 25 | 北京 |
| 李四 | 30 | 上海 |
| 王五 | 28 | 广州 |
注意事项
虽然该方法现代浏览器支持良好，但仍需注意以下几点：- 确保 border-collapse: collapse 避免边框重叠导致渐变断裂
- 避免在 tr 上定义固定背景色，会覆盖渐变效果
- IE 不支持 background 渐变在 tr 上的平滑 transition，建议现代项目中使用
基本上就这些。用好 :nth-child 和 transition，就能轻松做出美观又动态的表格样式。
