why “a:hover MUST come after a:link and a:visited（w3school）”？

Question

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.

Answer 1

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:

1. A link is unvisited before it is visited.

2. A link is visited before it is hovered over.

3. A link is hovered over before it is in active use.