Why do anchor pseudo-classes a:link, :visited, :ho

问题:

This question already has answers here:

Why does .foo a:link, .foo a:visited {} selector override a:hover, a:active {} selector in CSS? (3 answers)

Closed 4 years ago.

According to W3 Schools the order that the pseudo classes on the anchor element are declared is vitally important.

Why is this? Are there any others?

回答1:

There is a detailed description here:

http://meyerweb.com/eric/css/link-specificity.html

It is related to CSS specificity.
Citing from there:

All of them can apply to a hyperlink, and in some cases, more than one will apply. For example, an unvisited link can be hovered and active at the same time as it's an unvisited link. Since three of the above rules apply to the hyperlink, and the selectors all have the same specificity, then the last one listed wins. Therefore, the "active" style will never appear, because it will always be overridden by the "hover" style. Now consider a hyperlink which has been visited. It will always and forever be purple, because its "visited" style beats out any other state, including "active" and "hover."
 
This is why the recommended order in CSS1 goes like this:

A:link
A:visited
A:hover
A:active

BTW W3 Schools is not the best resource for formal definitions. You are better off going to the source, at w3c. For example, it is not "vitally important", but it is recommended.