CSS 覆盖 :visited 覆盖 :link :hover :active
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4949280/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Overriding :visited overrides :link :hover :active
提问by
please consider these styles:
请考虑这些样式：
a:link { color: blue }
a:visited { color: red }
a:hover { color: green }
a:active { color: black }
#special:link { color: pink }
And now this markup:
现在这个标记：
<a href="#">Normal link</a>
<a href="#" id="special">Special link</a>
I expect the "special" link to be pink while keeping the other colors. However, pink replaces the other colors.
我希望“特殊”链接为粉红色，同时保留其他颜色。然而，粉红色取代了其他颜色。
Why is this happening? How could I fix it? Thank you.
为什么会这样？我怎么能修好呢？谢谢你。
采纳答案by Brad Christie
I believe it has to do with CSS priorityorder.
我相信这与 CSS优先级顺序有关。
Because #specialis an ID, it dwarfs any element-level style applied. (This can be proven in Firefox Firebug/Chrome Inspector and how the inherited style sheets are all over-written by the ID's style).
因为#special是 ID，它使应用的任何元素级样式相形见绌。（这可以在 Firefox Firebug/Chrome Inspector 以及继承的样式表如何被 ID 的样式全部覆盖）中得到证明。
Though, considering there is no "present style" applied for :active, :visited, etc. It would stand to reason these styles would still be un-affected. Yet, making the following change to your hover seems to kick it back in to gear:
但是，考虑到没有“当前样式”应用于 :active、:visited 等。这些样式仍然不受影响是合情合理的。然而，对悬停进行以下更改似乎可以将其重新启动：
a:hover { color: green !important; }
回答by LapinLove404
Why is this happening?
为什么会这样？
Styles for the :linkpseudo-class apply to all links states, so it includes :hover, :visitedand :active
:link伪类的样式适用于所有链接状态，因此它包括:hover,:visited和:active
This is what I have observed since I started using CSS years ago. I don't know if it's how it is supposed to work but it is how I have seen it working and expect it to work.
这是我多年前开始使用 CSS 后所观察到的。我不知道它是否应该如何工作，但这是我看到它工作并期望它工作的方式。
So when, you set a style for #special:link, that style also applies to #special:hover, #special:visitedand #special:active
因此，当您为 设置样式时#special:link，该样式也适用于#special:hover，#special:visited并且#special:active
Note that the use of an ID does not change much here.
If you try it with the below CSS, you will have both links pink... even for :hoverstate
请注意，ID 的使用在这里没有太大变化。
如果你用下面的 CSS 尝试，你的两个链接都会变成粉红色……即使是:hoverstate
a:link { color: blue }
a:visited { color: red }
a:hover { color: green }
a:active { color: black }
a:link { color: pink }
How could I fix it?
我怎么能修好呢？
You can use !importantas suggested by Brad or set the various states styles for #special together with the regular links.
您可以!important按照 Brad 的建议使用，也可以将#special 的各种状态样式与常规链接一起设置。
a:link { color: blue }
#special:link { color: pink }
a:visited, #special:visited { color: red }
a:hover, #special:hover { color: green }
a:active, #special:active { color: black }
回答by chiliNUT
Its aggravating...and order matters here:
它的加重......这里的顺序很重要：
a:hover{
color:green;
}
a:visited{
color:red;
}
This means that unvisited links will turn green when you hover over them, and visited links will stay red when you hover on them.
这意味着当您将鼠标悬停在未访问的链接上时，它们会变成绿色，而当您将鼠标悬停在它们上面时，访问过的链接将保持红色。
Switch:
转变：
a:visited{
color:red;
}
a:hover{
color:green;
}
This means that both visited links and unvisited links will turn green when you hover on them. I hate that the order of these properties changes the behavior; the hover style should take effect regardless.
这意味着当您将鼠标悬停在访问过的链接和未访问过的链接上时，它们都会变成绿色。我讨厌这些属性的顺序会改变行为；无论如何，悬停样式都应该生效。
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>回答by Imran Bughio
回答by Marco
No, it is not going to use the other colors because of its ID, in such case you should add the rest of actions and colors to the ID.
不，由于它的 ID，它不会使用其他颜色，在这种情况下，您应该将其余的动作和颜色添加到 ID。
For example, the link that you have, the "special" one, when over will say.
例如，您拥有的链接，“特殊”链接，当结束时会说。
Ok, I'm 'a' ... link ... and my ID is .. special, so, I will keep the special parameters.
好的，我是 'a' ... link ... 而我的 ID 是 .. 特别的，所以，我会保留特别的参数。
That's why that's not going to change.
这就是为什么这不会改变。
Hope this helps,
希望这可以帮助，
