8

很奇怪的事情。。

我想在悬停时更改链接的文本颜色和背景颜色。

这是代码

CSS：

#link-menu a
{
    color:white;
    display:block;
    height:100%;
    width: 100%;
    text-decoration:none;
    text-align:center;
    line-height:45px;
    font-weight:bold;
    font-family:"trebuchet ms","comic sans ms";
    outline:none;
}

.link2 a:hover 
{
    color:black;
    background:white;
}

并不是说悬停不起作用。背景颜色正在改变，但文本颜色没有改变。

另一个重要的事实是，如果我不使用 .link2 类，而是使用 id，颜色也会发生变化。问题在于仅使用类。有人可以解释原因和解决方案吗？

注意：我不想使用父元素 ID。因为我不想更改所有链接的背景。

4

3 回答 3

21

这是一个特异性问题；你的第一个选择器覆盖第二个，因为它有一个 ID。您唯一的选择是使用!important规则或在您的第二个选择器中包含父级作为祖先，因此它更具体，例如

#link-menu a:hover {
    background: white;
    color: black;
}
于 2013-06-06T16:19:16.330 回答
11 
#link-menu a

具有更高的优先级。您需要增加第二个选择器的优先级。尝试添加 !important

.link2 a:hover 
{
    color:black !important;
    background:white;
}
于 2013-06-06T16:19:25.493 回答
6

#link-menu a比 更具体.link2 a:hover，因为第一个包含 ID 而第二个不包含。

因此，它会覆盖第二条规则中的属性。

要解决此问题，请更改它们以使它们都具有相同的特异性（在 之前:hover），或添加!important.

于 2013-06-06T16:19:09.403 回答