CSS styling links: why a:link, a:visited vs just a

Question

i wonder why i can't use, or should not use

a { ... }

vs

a:link, a:visited { ... }

Answer 1

If you only style a {...} then the style will be applied to all anchor elements including <a name="..."></a> elements, which define an anchor within the page, but do not reference a hyperlink.

a:link {...} specifically relates to hyperlinks. :visited, :hover and :active are different states of these links. Note that :hover and :active can apply to other elements as well.

Answer 2

You may provide the general style for your links with the a only. More specific styles can than be applied to the pseudo-classes. For example:

a {
    text-decoration: none;
    font-weight: bold;
}

a:link {
    color: #00F;
}

a:hover {
    color: #F00;
}

a:visited {
    color: #888;
}

a:active {
    color: #0F0;
}

In this example, all links are styled bold and are not underlined. But the color changes for each type of link...