Overriding :visited overrides :link :hover :active

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开发者_JS百科, pink replaces the other colors.

Why is this happening? How could I fix it? Thank you.

---

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>

---

I believe it has to do with CSS priority order.

Because #special is 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).

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:

a:hover { color: green !important; }

---

Why is this happening?

Styles for the :link pseudo-class apply to all links states, so it includes :hover, :visited and :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.

So when, you set a style for #special:link, that style also applies to #special:hover, #special:visited and #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 :hover state

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 !important as suggested by Brad or set the various states styles for #special together with the regular links.

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 }

---

Here is another quick way around:

You can use :not(:hover).

#special:link:not(:hover) { color: pink }

DEMO

---

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.

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.

That's why that's not going to change.

Hope this helps,