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

Question

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

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

高亮代码：

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

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

tr.alt td
{
background: #daecf5;
}

有什么想法可以解决这个问题吗？

Answer 1

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

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

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

Answer 2

问题是根据 css 级联规则tr.alt td更具体。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 的支持，但我认为这并不是真正的功能损失，而且在优雅降级的范围内。