问题
Whats the correct order of styling the <a> element (link, visited, hover, active). All are confusing by providing different combination like LVHA, LAHV. Can anybody specify the correct ordering?
回答1:
Link Visited Hover Active
To quote from the CSS specification:
a:link { color: red } /* unvisited links */ a:visited { color: blue } /* visited links */ a:hover { color: yellow } /* user hovers */ a:active { color: lime } /* active links */Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.
回答2:
You might prefer VLHA ordering as well, which makes no difference. However CSS spec specified LVHA ordering and, in fact, this one is easy to memorize: i LoVeHA!
回答3:
Here is the best order, especially for pseudo classes. A L V VH H A (I pronounce it Al'va ha')
a { color: white; text-decoration: none; } /* bookmark */
a:link { color: red; } /* regular link */
a:visited { color: green; text-decoration: strikethrough; } /* visited link */
a:visited:hover { color: blue; text-decoration: underline overline; } /* visted hover link */
a:hover { color: yellow; text-decoration: underline overline; } /* hover link */
a:active { color: orange; text-decoration: underline overline; } /* active link */
This keeps both visited states and both hover states together as well as staying with the specified order. It also allows for styling of bookmarks such as
<a name="bookmark_name">Bookmark Text</a>
which you can target with
<a href="bookmark_name">Link Text</a>
I find this is great for linking right to a section of a site but where you don't want the bookmark to have an automatic hover style, which it will since it's an anchor tag.
来源：https://stackoverflow.com/questions/1536810/link-order-in-css