Jaka jest różnica między „skupieniem” a „aktywnym”

":centrum„Pseudoklasa służy do zdefiniowania właściwości CSS dla stanu elementu, gdy akcja została na nim wykonana lub wybrano element. Z drugiej strony „:aktywny„Pseudo-klasa określa właściwości CSS dla instancji, gdy akcja jest wykonywana i jest ogólnie wyzwalana, gdy użytkownik kliknie lub wybierze określony element.

Ten post pokaże działanie „:centrum" I ":aktywny„Pseudo zajęcia i różnica między nimi.

: Focus vs: Active

„„:aktywny”Jest uruchamiany dokładnie w momencie lub wystąpieniu użytkownik kliknie element i znika, gdy użytkownik opuszcza kliknięcie myszy. Na przykład jest wyzwalany po kliknięciu przycisku, a efekt znika, gdy mysz jest ustawiona. Ale po zdarzeniu (kliknięcie przycisku) efekt właściwości dodany w „:centrum„Pozostałości pseudoklasy.

Przykład: Tworzenie przycisku z: Focus i: Active

Zrozumiemy to z prostym praktycznym przykładem, tworząc przycisk, a następnie dodając „:centrum" I ":aktywny„Pseudoklasy:

Kolor tego tekstu zmieni się, gdy klikniesz ten przycisk
Po kliknięciu będzie wyświetlany jako odważny tekst

W powyższym fragmencie kodu:

• Istnieje klasa DIV o nazwie „moja klasa". Celem elementu DIV zawierającego tę klasę jest po prostu wyrównanie zawartości w środku do centrum.
• Potem jest „”Tag do utworzenia przycisku, a między przyciskiem otwierającym i zamykania jest tekst wyświetlany na przycisku.

„„:centrum" I ":aktywny„Pseudoklasy dla powyższego fragmentu kodu HTML można dodać w elemencie stylu CSS, takim jak:

przycisk
czcionek: normalny;
czarny kolor;
Margines: 30px;

przycisk: Focus
Kolor: Fuchsia;

przycisk: Active
Font-Weight: Bold;

.moja klasa
Text-Align: Center;

W powyższym elemencie stylu CSS:

• Istnieje selektor odnoszący się do elementu przycisku, w którym właściwości CSS, i.mi., "grubość czcionki”,„kolor" I "margines"Zostały zdefiniowane.
• W "Przycisk: Focus„Pseudoklasa, wartość„kolor„Własność jest zdefiniowana jako„fuksja". To zmieni kolor tekstu w „fuksia” po kliknięciu przycisku.
• W "Przycisk: Active„Pseudoklasa,„grubość czcionki„Własność CSS jest zdefiniowana jako„pogrubiony”, To odważnie tekst przycisku w instancji, gdy użytkownik kliknie przycisk.
• Następnie dodany selektor klas odnosi się do elementu DIV i „Text-Align: Center”Wierność CSS została dodana w celu wyrównania przycisku utworzonego wewnątrz elementu DIV do środka.

„„:centrum" I ":aktywny„Pseudoklasy działają w następujący sposób w koordynacji z nieruchomościami:

Chodziło o funkcjonalność „:centrum" I ":aktywny”I różnica między nimi.

Wniosek

„„:centrum" I ":aktywny„Klasy pseudoklasy są używane do zdefiniowania właściwości CSS dla elementów w przypadkach, gdy określone zdarzenie jest wykonywane na elemencie HTML. Wpływ właściwości zdefiniowanych w pseudoklice „: Active” natychmiast znika po zdarzeniu jak kliknięcie myszy, ale efekt właściwości zdefiniowanych w pseudoklice „: focus” pozostaje po wydarzeniu wykonanym na elemencie.