Overriding :visited overrides :link :hover :active

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; }