CSS 表格：悬停时更改背景，包括替代行答案

【问题标题】：CSS tables: changing background on hover, including alternative rowsCSS 表格：悬停时更改背景，包括替代行
【发布时间】：2013-06-27 08:59:12
【问题描述】：

我创建了一个带有表格的示例页面。如果该页面将来被删除，here's Pastebin 上的代码。

我想在悬停时突出显示表格行。它适用于普通 tr，但不适用于 tr.alt（奇数行）。

高亮代码：

tr:hover,tr.alt:hover
{
background: #f7dcdf;
}

使奇数行不同颜色的代码：

tr.alt td
{
background: #daecf5;
}

任何想法如何解决这个问题？

【问题讨论】：

【解决方案1】：

确保悬停效果的规则低于 .alt 颜色，因为这会覆盖以前的规则或添加 !important

tr:hover,tr.alt:hover
{
    background: #f7dcdf!important;
}

还请注意，您正在将 .alt 行的背景颜色应用于单元格（td），此颜色将出现在 tr 背景的“前面”，因此请更改您的规则，以便两者都适用于单元格或整行

【讨论】：

【解决方案2】：

问题是tr.alt td 根据 css 级联规则比 tr.alt:hover 更具体。

简单的方法是确保:hover 规则比.alt 规则更具体。这可以通过将tr.alt td 更改为tr.alt 来完成

作为旁注，您是否知道您不需要 .alt 类来定位奇数行？有一个非常有用的:nth-child() 伪类可以为您处理这些问题。你可以在这里阅读所有相关信息：http://css-tricks.com/how-nth-child-works/

我冒昧地将其应用于您的样本：http://jsfiddle.net/3tV9b/
请注意，我所做的只是将 tr.alt td 更改为 tr:nth-child(2n+1) 并删除了所有具有 .alt 类的选择器。

这种技术的最大优点是您无需费心维护 HTML，您可以根据需要添加和删除行，并且交替颜色应该继续工作。

缺点是（当然）对 IE 的支持，但我认为这并不是真正的功能损失，而且在优雅降级的范围内。

【讨论】：