Jaka jest różnica między:focus A: active?

:active       Adds a style to an element that is activated
:focus        Adds a style to an element that has keyboard input focus
:hover        Adds a style to an element when you mouse over it
:lang         Adds a style to an element with a specific lang attribute
:link         Adds a style to an unvisited link
:visited      Adds a style to a visited link

Source: Pseudoklasy CSS

Są cztery przypadki.

1. domyślnie aktywne i fokus są wyłączone.
2. Kiedy zakładka aby przejść przez elementy fokusowalne, wejdą :focus (bez aktywnego).
3. Kiedy klikniesz na element nieostry , wchodzi :active (bez ostrości).
4. Kiedy klikniesz na element focusable wchodzi :active:focus (aktywny i focus jednocześnie).

przykład:

<div>
  I cannot be focused.
</div>

<div tabindex="0">
  I am focusable.
</div>

div:focus {
  background: green;
}

div:active {
  color: orange;
}

div:focus:active {
  font-weight: bold;
}

Gdy strona ładuje się oba są w przypadku 1. Po naciśnięciu tab skupisz drugi div I zobaczysz go w przypadku 2. Po kliknięciu na pierwszy div zobaczysz przypadek 3. Po kliknięciu drugiego div, zobaczysz przypadek 4.

To, czy element jest fokusowalny, czy nie, jest kolejnym pytaniem . Większość z nich nie jest domyślnie. Ale można bezpiecznie założyć <a>, <input>, <textarea> domyślnie można ustawić ostrość.

: focus jest wtedy, gdy element jest w stanie zaakceptować wejście - kursor w polu wprowadzania lub łącze, do którego została dodana karta.

: aktywny jest wtedy, gdy element jest aktywowany przez Użytkownika - czas pomiędzy naciśnięciem przycisku myszy, a następnie zwolnieniem go.

Active jest wtedy, gdy użytkownik aktywuje ten punkt (np. kliknięcie myszką, jeśli użyjemy tab from field-to-field nie ma znaku od stylu active. Może kliknięcie potrzebuje więcej czasu, po prostu spróbuj przytrzymać kliknięcie na tym punkcie), fokus następuje po aktywacji punktu. Spróbuj tego:

<style type="text/css">
  input { font-weight: normal; color: black; }
  input:focus { color: green; outline: 1px solid green; }
  input:active { color: red; outline: 1px solid red; }
</style>

<input type="text"/>
<input type="text"/>

Focus może być podany tylko przez wejście klawiatury, ale Element może być aktywowany zarówno przez mysz, jak i klawiaturę.

Jeśli ktoś użyje :focus na łączu, reguła stylu będzie stosowana tylko Przy wciśnięciu bottona na klawiaturze.

Użycie "focus"da użytkownikom klawiatury taki sam efekt, jaki użytkownicy myszy uzyskują, gdy najeżdżają myszą. "Aktywny" jest potrzebny, aby uzyskać ten sam efekt w Internet Explorer.

Rzeczywistość jest taka, że te stany nie działają tak, jak powinny dla wszystkich użytkowników. Nieużywanie wszystkich trzech selektorów powoduje problemy z dostępnością dla wielu użytkowników używających wyłącznie klawiatury, którzy fizycznie nie są w stanie korzystać z myszy. Zapraszam do podjęcia wyzwania # nomouse (nomouse dot org).