Understanding link pseudo class inheritence

Question

I have a simple setup with a:link, a:visited a:hover and a:active all defined at the top of my style sheet. I also have a div where I've defined an a:link color for anchors inside of it. When I do this those links do not inherit the remaining pseudo classes for hover and active.... until I click that div's link and it has thus been "visited", at which point the pseudo classes start working. Why is this?

the CSS...

a:link {
    color: blue;
}

a:visited {
    color: purple
}

a:hover {
    color: red;
}

a:active {
    color: pink;
}

#theDiv a:link {
    color: green;
}

the HTML...

<a href="#33">The First Link</a>
<div id="theDiv">
    <a href="#33">The Second Link</a>
</div>

http://jsfiddle.net/ZKztj/7/

Answer 1

#theDiv a:link has a higher specificity than all your other selectors and is overriding them until the link no longer matches the :link selector, at which point it matches the :visited selector.

Answer 2

All browsers set a default style for anchor elements. You need a more specific selector to override:

#theDiv a:hover {color:red}