Question

在我的网站http://thelooter.family上，我有以下CSS代码：

#nav a:hover {
    color: red;
    text-decoration: underline;
    font-weight: bold;
}
#nav a:visited {
    color: lime;
    text-decoration: none;
}
#nav a {
    color: lime;
    text-decoration: none;
}
#nav #location {
    color: skyblue;
    text-decoration: underline;
    font-weight: bold;
}

以及以下HTML代码：

<div id="nav">
  <p>
    <a href="/#" id="location">Home</a><br>
    <a href="/gamecheatlist">Game Cheat List</a><br>
    <img src="" id="2big4u" height="10px" width="10px"/>&nbsp;
    <a href="/gamecheatlist/minecraft">Minecraft</a><br>
    <img src="" id="2big4u" height="10px" width="10px"/>&nbsp;
    <img src="" id="2big4u" height="10px" width="10px"/>&nbsp;
    <a href="/gamecheatlist/minecraft/crafting">Crafting</a><br>
    <img src="" id="2big4u" height="10px" width="10px"/>&nbsp;
    <a href="/gamecheatlist/little-alchemy">Little Alchemy</a>
  </p>
</div>

悬停的链接应该变成红色，对吧？当他们徘徊在Minecraft，Crafting或Little Alchemy上时，他们会变成红色，但Game Cheat List会保持不变。

Answer 1

由于您访问了该链接，因此保持绿色，而a:hover和a:visited的CSS选择器同样强大且＃34;因此最后一个选择器胜出。要解决此问题，请 a:hover后声明a:visited ，以便a:hover强于a:visited，从而重新排序您的CSS选择器 ，或增加a:hover的特异性。

#nav a:visited { color: lime; text-decoration: none; } #nav a:hover { color: red; text-decoration: underline; font-weight: bold; }

A Quick Guide to CSS Specificity

Answer 2

问题在于：

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

访问链接后，它在悬停时不会变为红色。

应用这些css更改，它应该可以正常工作：

 #nav a:hover, #nav a:visited:hover {
    color: red;
    text-decoration: underline;
    font-weight: bold;
}

Check this screenshot

悬停时文本颜色不会改变，但其他人会这样做

2 个答案: