css - 覆盖 :visited overrides :link :hover :active

Question

请考虑这些样式:

a:link { color: blue }
a:visited { color: red }
a:hover { color: green }
a:active { color: black }
#special:link { color: pink }

现在这个标记:

<a href="#">Normal link</a>
<a href="#" id="special">Special link</a>

我希望“特殊”链接是粉红色的，同时保留其他颜色。然而，粉红色取代了其他颜色。

为什么会这样？我该如何解决？谢谢。

Answer 1

这很让人恼火……这里的秩序很重要:

a:hover{
color:green;
}

a:visited{
color:red;
}

这意味着当您将鼠标悬停在未访问的链接上时，它们将变为绿色，而当您将鼠标悬停在其上时，已访问的链接将保持红色。

切换:

a:visited{
color:red;
}

a:hover{
color:green;
}

这意味着当您将鼠标悬停在已访问链接和未访问链接上时，它们都会变为绿色。我讨厌这些属性的顺序改变了行为；无论如何，悬停样式都应该生效。

a:link{
    color:blue;
}

a.one:hover{
    color:green;
}
a.one:visited{
    color:red;
}

a.two:visited{
    color:red;
}
a.two:hover{
    color:green;
}

<a href=#ddd class=one>One (wont change color on hover when visited)</a> |
<a href=#ddd class=two>Two (always turns green on hover)</a>