CSS-Steuerung, wann der Fokus-Selektor angewendet wird

Der Selektor :focus wird verwendet, um Elemente zu formatieren, die einen Fokus im allgemeinen Sinne haben. Aber wann genau wird es angewendet, wenn man Fälle wie die Maus oder die Berührung betrachtet? Und wie kann ich als Webentwickler die Konsistenz steuern?

z.B. hier auf stackoverflow, wenn ich mit der Maus auf einen der Links klicke, aber nicht aktiviere, indem ich die Maus vor dem Loslassen wegbewegt, bekommt der Link den Tastaturfokus (wie man sieht, wenn man dann Tab drückt, geht der Fokus zum nächsten Link). Es wird jedoch nicht der :focus Stil angezeigt, obwohl es den Fokus hat. Wenn ich jedoch auf einen Link klicke, bekomme ich den :focus Umriss-Stil.

Aber auf einer der Webseiten, an denen ich gerade arbeite, gibt mir die Maustaste den :focus Stil sofort, also muss es ein subtiles Detail geben.

In diesem Snippet funktionieren die Elemente <a> und <button> in Chrome für mich wie meine frühere Beschreibung, und das anklickbare <div> scheint wie das letztere zu funktionieren. Aber auf einer meiner Seiten passiert letzteres in allen 3 Fällen, und ich bin nicht einmal sicher, warum sie in diesem Ausschnitt nicht alle gleich sind, da ich hier keine zusätzlichen Stile oder JS habe.

BEARBEITEN: In IE11 funktioniert alles wie der Standard <a> und <button & gt; in der GIF, einschließlich auf meinen anderen Seiten. Vielleicht ein Chrome-Bug, oder gibt es immer noch ein paar Feinheiten, die ich übersehen habe, wenn ein :focus style angewendet wird? Ist die Reihenfolge der Pseudoklassen-CSS-Regeln hier auf nicht naheliegende Weise wichtig?