I‘m study CSS in the "w3schools", in the chapter of "link", they say:
"When setting the style for several link states, there are some order rules:
a:hover MUST come after a:link and a:visited a:active MUST come after a:hover"
I want to know why the correct order is L.V.H.A, not L.H.V.A or another.
Pseudo-classes must be declared in a specific order.
The mnemonic LoVe HAte is always useful for remembering the correct order:
:link
:visited
:hover
:active
Each pseudo-class corresponds to an event which can only happen later in the timeline than the one before.
That is to say:
A link is unvisited before it is visited.
A link is visited before it is hovered over.
A link is hovered over before it is in active use.
The main reason why is because the latter rules execute after the previous ones found in a document in CSS in order, meaning that the behavior of the latter will be executed after all previous rules matched are executed. Therefore, their order does matter in order to avoid overlappings that will affect the behavior of each other.
If for example :link is put after :visited, some behavior of :visited will be overlapped, for example its color showing probably as a normal link despite visited.
来源：https://stackoverflow.com/questions/34239814/why-ahover-must-come-after-alink-and-avisited-w3school