:focus
i :active
są dwoma różnymi stanami.
:focus
reprezentuje stan, w którym element jest obecnie wybrany do odbioru danych wejściowych i
:active
reprezentuje stan, w którym element jest obecnie aktywowany przez użytkownika.
Powiedzmy na przykład, że mamy <button>
. Na początku <button>
nie będzie żadnego stanu. Po prostu istnieje. Jeśli użyjemy, Tababy „skupić się” na <button>
, to teraz wejdzie w swój :focus
stan. Jeśli następnie klikniesz (lub naciśniesz space), sprawisz, że przycisk przejdzie w :active
stan ( ).
W tym pamiętać, kiedy klikniesz na element, dajesz koncentrować, który kultywuje również złudzenie, że :focus
i :active
są takie same. One nie są takie same. Po kliknięciu przycisk jest w :focus:active
stanie.
Przykład:
<style type="text/css">
button { font-weight: normal; color: black; }
button:focus { color: red; }
button:active { font-weight: bold; }
</style>
<button>
When clicked, my text turns red AND bold!<br />
But not when focused only,<br />
where my text just turns red
</button>
edycja: jsfiddle
document.activeElement
właściwości, chociaż musi on znajdować się w try catch, ponieważ IE8 może zgłosić wyjątek. I pamiętaj, że starsze wersje przeglądarek mogą traktować: aktywne i: skupiać się inaczej.function activeElement() { try { return document.activeElement; /* can get exeption in IE8 */ } catch(e) { } }
:active
stanfocus
iactive
deklaracja nie ma znaczenia. Ma to znaczenie tylko wtedy, gdy są ze sobą sprzeczne, np.color:red
Icolor:blue
(wtedy ostatni wygrywa).Źródło: Pseudoklasy CSS
źródło
visited
linki nie zmienią stylu po najechaniu myszką lub kliknięciu, ponieważ ich „odwiedzalność” zastąpi inne pseudoklasy. LVHFA to kolejność, z której większość osób będzie chciała korzystać w większości przypadków. Nie jestem pewien, dlaczego zawarłeślang
...Istnieją cztery przypadki.
:focus
aktywowanymi, wejdą one (bez aktywnych).:active
(bez ostrości).:active:focus
(aktywnej i skupić się jednocześnie).Przykład:
Gdy strona ładuje się, oba są w skrzynce 1. Po naciśnięciu klawisza skupisz drugi div i zobaczysz, że pokazuje wielkość liter 2. Po kliknięciu pierwszego elementu div zobaczysz wielkość liter 3. Gdy klikniesz drugi element div, zobaczysz wielkość liter 4 .
To, czy element można ustawić, czy nie, to inna kwestia . Większość nie jest domyślnie. Ale to jest bezpiecznie założyć
<a>
,<input>
,<textarea>
jest aktywowana domyślnie.źródło
:active
ale nie mogą:focus
. To jedna kwestia, która mnie myliła, ponieważ inne odpowiedzi nie dotyczyły.: focus ma miejsce, gdy element jest w stanie zaakceptować dane wejściowe - kursor w polu wejściowym lub łącze, które zostało tabulowane.
: aktywny jest, gdy element jest aktywowany przez użytkownika - czas pomiędzy naciśnięciem przycisku myszy a zwolnieniem go.
źródło
Aktywny jest, gdy użytkownik aktywuje ten punkt (Podobnie jak kliknięcie myszą, jeśli używamy tabulacji z pola na pole, nie ma znaku z aktywnego stylu. Może kliknięcie wymaga więcej czasu, po prostu przytrzymaj ten punkt), fokus jest wykonywany po punkt jest aktywowany. Spróbuj tego :
źródło
Fokus można uzyskać tylko za pomocą klawiatury, ale element można aktywować zarówno myszą, jak i klawiaturą.
Jeśli użyjesz: skoncentruj się na łączu, reguła stylu będzie obowiązywać tylko po naciśnięciu klawisza na klawiaturze.
źródło
:focus
tak nie działa. Obszar tekstowy, który wpisuję, jest obecnie aktywny, ponieważ kliknąłem przycisk. Może także stracić i przywrócić ostrość, klikając go i ponownie w niego wchodząc. Za chwilę skupię się na przycisku Dodaj komentarz po prawej stronie, klikając go. Wszystko to bez wprowadzania danych z klawiatury powodujących skupienie.Użycie „skupienia” da użytkownikom klawiatury taki sam efekt, jaki uzyskują użytkownicy myszy po najechaniu myszką. „Aktywny” jest potrzebny, aby uzyskać ten sam efekt w Internet Explorerze.
W rzeczywistości stany te nie działają tak, jak powinny dla wszystkich użytkowników. Nieużywanie wszystkich trzech selektorów stwarza problemy z dostępem dla wielu użytkowników korzystających wyłącznie z klawiatury, którzy fizycznie nie są w stanie używać myszy. Zapraszam do podjęcia wyzwania #nomouse (nomouse dot org).
źródło