Jaka jest różnica między:focus A: active?
Jaka jest różnica między :focus
i :active
pseudoklasami?
7 answers
:focus
i :active
są dwoma różnymi stanami.
-
:focus
przedstawia stan, w którym element jest aktualnie wybrany do odbioru danych wejściowych i -
:active
przedstawia stan, w którym element jest aktualnie aktywowany przez użytkownika.
Na przykład powiedzmy, że mamy <button>
. <button>
nie będzie miał żadnego stanu na początek. Po prostu istnieje. Jeśli użyjemy Tab , aby dać "focus" <button>
, teraz wchodzi ona w swój stan :focus
. Po kliknięciu (lub naciśnięciu spacja ), następnie przycisk Wprowadź jego stan (:active
).
Na tej nucie, gdy klikniesz na element, nadajesz mu ostrość, co również kultywuje iluzję, że :focus
i :active
są takie same. Nie są takie same. Po kliknięciu przycisk jest w stanie :focus:active
.
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>
Edit: jsfiddle
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-05-31 03:05:45
: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
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-06 16:02:58
Są cztery przypadki.
- domyślnie aktywne i fokus są wyłączone.
- Kiedy zakładka aby przejść przez elementy fokusowalne, wejdą
:focus
(bez aktywnego). - Kiedy klikniesz na element nieostry , wchodzi
:active
(bez ostrości). - 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ść.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:26:36
: 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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-11-05 02:47:05
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"/>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-10 04:35:00
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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-19 18:10:48
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).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-18 23:22:08