The difference between pseudo-class Link,hover,active,visited,focus

/*css*/
a:link{
Color:blue;
}
a:visited{
Color:green;
}
a:hover{
color:red;
}
a:focus{
Color:black;
}
a:active{
Color:yellow;
}

/*html*/
<p><a href= "#" >click me</a></p>

Link indicates the colors that the links display under normal circumstances, that is, when the page has just been loaded.

Hover represents the color that is displayed when the mouse hovers.

Active represents the color that is displayed when the indicated element is in the active state (the mouse is pressed on the element without releasing it).

The focus represents the color used when the element gets the cursor focus, and is used primarily for text box input text. Cases:

/*css*/
#txt: focus{
background-color:red;
}

/*html*/
<input type= "text" id= "TXT" >

Note: Active is equivalent to focus at this point, and the display is determined by the position of active and focus.

Note Two: The Order of pseudo-classes should be link--visited--hover--focus--active.

Note three: link with active, text box with focus.

Note Four: Active more than hover is used together.

The difference between pseudo-class Link,hover,active,visited,focus