Why does some css code not work?

Why is some css code ineffective in the tutorial www.bkjia.com? For example, the following code is related to the Arrangement. You can change the sequence of css code. The following seems to be a piece of wrong code:

Copy to ClipboardReference: [www.bkjia.com] <style type = "text/css">
<! -
A: hover {text-decoration: underline; color: blue}
A: link {text-decoration: underline; color: red}
A: visited {text-decoration: green}
->
</Style>
<A href = "http://www.bkjia.com/"> helping customers </a>

The following code is correct:

Copy to ClipboardReference: [www.bkjia.com] <style type = "text/css">
<! -
A: link {text-decoration: underline; color: red}
A: hover {text-decoration: underline; color: blue}
A: visited {text-decoration: green}
->
</Style>
<A href = "http://www.bkjia.com/"> helping customers </a>

Why is it like this?

1. First, there is a link --- there is no link, and there is a mouse above the effect?

2. The second step will show the effect of the mouse on the top. ------ the mouse is not on the top or the focus is not obtained. How can this effect be achieved after the mouse is clicked?

3. Finally, the effect of clicking is displayed.

Haha, it's not very cutting-cut. If you understand the meaning, OK.