Where to put the focal pseudo selector

Question

It is widely known that pseudo-classes for links must follow the LoVe-HAte rule:

a:link
a:visited
a:hover
a:active

But what is the right place to place the pseudo selector a:focus? There are two possible options, from my point of view - before and after :hover. I want to know which way is right.

var. 1        var. 2

a:link     |  a:link
a:visited  |  a:visited
a:focus    |  a:hover
a:hover    |  a:focus
a:active   |  a:active

A small note: On the Internet, I have already seen someone say to put it in front :hover. On the other hand, someone else says that it should be located after :hover. But in all such cases, the reasons were not discussed. Or, sometimes, reasoning was too difficult to understand.

Answer 1

, -, :focus ( SO):

, . DOM Level 2 HTML, , focus() - HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement HTMLAnchorElement. HTMLButtonElement HTMLAreaElement.

, , "" , , , , , .

, , :hover :link :visited CSS , :link :visited, , :active , , :active :hover.

:focus click, active, hover , "" , .

, :focus 1- :focus (<button> ):

/* placed 1st */
input:focus {background: limegreen;}
input:link {color: red;}
input:visited {color: green;}
input:hover {color: hotpink;}
input:active {color: blue;}
button:link {color: red;}
/* placed 2nd */
button:focus {background: limegreen;}
button:visited {color: green;}
button:hover {color: hotpink;}
button:active {color: blue;}
a:link {color: red;}
a:visited {color: green;}
/* placed 3rd */
a:focus {background: limegreen;}
a:hover {color: hotpink;}
a:active {color: blue;}
select:link {color: red;}
select:visited {color: green;}
select:hover {color: hotpink;}
/* placed 4th */
select:focus {background: limegreen;}
select:active {color: blue;}
textarea:link {color: red;}
textarea:visited {color: green;}
textarea:hover {color: hotpink;}
textarea:active {color: blue;}
/* placed last */
textarea:focus {background: limegreen;}

<textarea name="" id="" cols="30" rows="10"></textarea><br>
<select name="" id="">
  <option value="a">first</option>
  <option value="b">second</option>
</select>
<input type="text"><br>
<a href="#">Anchor link</a><br>
<button type="text">Click Me</button>

Hide result

Answer 2

, , 2 - a: link, a: visited, a: hover, a: focus, a: active.

, . , , , (, ). - , . , , (), .

, . - , ) b) . (a) , , , enter ( ). (b) , - , , .

, vs visited - , - . , , ( ), , , , , . , , , () ().