问题
This question already has an answer here:
- Why does .foo a:link, .foo a:visited {} selector override a:hover, a:active {} selector in CSS? 3 answers
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.
来源：https://stackoverflow.com/questions/16994383/why-do-anchor-pseudo-classes-alink-visited-hover-active-need-to-be-in-cor