css表格奇偶行背景色渐变如何实现_使用:nth-child和transition-css教程-PHP中文网

css表格奇偶行背景色渐变如何实现_使用:nth-child和transition

P粉602998670

发布： 2025-12-16 19:23:32

原创

885人浏览过

使用:nth-child区分奇偶行并设置不同渐变背景，配合transition实现悬停平滑过渡，提升表格视觉层次与交互体验，适用于现代浏览器。

css表格奇偶行背景色渐变如何实现_使用: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 确保悬停样式优先级更高（尤其在动态加载内容时）

完整示例说明

下面是一个完整的表格结构示例：

<table class="table">
  <thead>
    <tr><th>姓名</th><th>年龄</th><th>城市</th></tr>
  </thead>
  <tbody>
    <tr><td>张三</td><td>25</td><td>北京</td></tr>
    <tr><td>李四</td><td>30</td><td>上海</td></tr>
    <tr><td>王五</td><td>28</td><td>广州</td></tr>
  </tbody>
</table>

登录后复制