CSS伪类：未应用悬停规则

Question

我正在尝试这样做，所以我的链接仍然是白色的，但是当鼠标悬停在它们上面时它们变成灰色并且有下划线但它不起作用，链接有效但它只是保持白色，这是我的CSS代码：

a:hover {
    text-decoration: underline;
    color:#666666
}

a:visited {
    text-decoration: none;
    color:#FFFFFF
}

a:link {
    text-decoration: none;
    color:#FFFFFF
}

Answer 1

为了澄清冰水的答案，像:hover，:link这样的伪类具有与类相同的特异性，更重要的是它们具有相同的特异性

我和你在一起，我个人觉得如果:visited暗示!important是好的，因为它是用户控制的状态，但这会使它更多很复杂所以...是的。只需重新排列您的群组 - 事实上，您需要的顺序与您现在的顺序完全相反。

Answer 2

为<a>设置的悬停属性是针对正常状态定义的（这意味着它涵盖了访问和未访问的链接），但您也定义了a:visited和a:link（并且在:hover仅声明之后也提到它，css解析器将改为赋予这些定义的属性更高的优先权。

解决方法

解决方法＃1

通过更改：

使其更具体

a:hover {
    text-decoration: underline;
    color:#666666
}

以

a:hover, a:visited:hover, a:link:hover {
    text-decoration: underline;
    color:#666666
}

演示@ http://jsfiddle.net/Wz6aR/

解决方法＃2

要更改优先级，请将声明顺序更改为：

a:visited {
    text-decoration: none;
    color:#FFFFFF
}

a:link {
    text-decoration: none;
    color:#FFFFFF
}

a:hover {
    text-decoration: underline;
    color:#666666
}

演示@ http://jsfiddle.net/9cGPv/

Answer 3

您应该订购链接伪类，如下所示：

a {...}
a:link {...}
a:visited {...}
a:focus {...}
a:hover {...}
a:active {...}

Answer 4

由于CSS是级联的，最后一条规则会覆盖之前的规则。如果你移动a:link定义更普遍，它应该可以正常工作。这当然是最不起作用的最小变化。

Answer 5

您可以通过检查Chrome devtools中的样式轻松追踪此类问题。你做到了吗？

1. 右键单击您担心的元素，然后选择“检查” 元素”

2. 样式标签将会打开。在element.style旁边，在右边， 你会看到三个图标。中间是带有的虚线矩形 小箭头。

3. 点击它，将打开一个窗格。设置:hover状态。见下面的截图。

4. 现在检查正在应用的规则。你会注意到的 您的:hover规则设置的属性将被删除。这意味着 他们被覆盖了。您还将看到中的属性 您的:link规则是正在应用的规则。这是为什么？因为， 正如其他海报所指出的那样，这个规则会在你的CSS中出现 因此优先。

---



---

快速谷歌的“悬停css”会给你MDN上的相关页面，总是一个很好的资源，在第一段说明：

  

：当用户使用指针设备指定元素时，hover CSS伪类匹配，但不一定要激活它。任何其他与链接相关的伪类都可以覆盖此样式，即：link，：visited和：active，出现在后续规则中。为了设置适当的链接样式，您需要将：hover规则放在：link和：visited rules 之后，但在：active之前，由LVHA订单定义:: link - ：visited - ：hover - ：active。

SO不是众包调试论坛。学会自己调试。