Question

一件非常奇怪的事情......

我希望在悬停时更改链接的文字颜色和背景颜色。

这是代码

的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。因为我不想改变所有链接的背景。

Answer 1

它是一个specificity问题;你的第一个选择器会覆盖第二个选择器，因为它有一个ID。您唯一的选择是使用!important规则或将父项作为祖先包含在您的第二个选择器中，以便更具体，例如

#link-menu a:hover {
    background: white;
    color: black;
}

Answer 2

#link-menu a

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

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

Answer 3

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

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

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

a：悬停颜色不起作用

3 个答案: