Was ist der Unterschied zwischen den :focus- und :active-Pseudoklassen von CSS?

Unterscheidung zwischen :focus- und :active-Pseudoklassen

Das Verständnis des Unterschieds zwischen den :focus- und :active-Zuständen ist bei der Arbeit mit entscheidend CSS. Diese Pseudoklassen stellen unterschiedliche Elementzustände dar, die bei der Interaktion mit HTML-Elementen ins Spiel kommen.

Was ist :focus?

Der :focus-Zustand gibt an, dass ein Element hat Eingabefokus erhalten. Dieser Zustand wird normalerweise ausgelöst, wenn ein Element Tastatureingaben empfängt oder wenn der Benutzer es mithilfe anderer fokussierbarer Mechanismen auswählt. Elemente wie Formularelemente (:input, :button, :a), Frame/:iframe verhalten sich folgendermaßen.

Was ist :active?

Der :active-Status stellt ein Element dar, das gerade vom Benutzer aktiviert wird. Dieser Zustand tritt häufig in interaktiven Szenarien auf, beispielsweise wenn ein Benutzer auf eine Schaltfläche klickt oder eine Taste drückt. Beispielsweise wechselt eine Schaltfläche normalerweise in den :aktiv-Zustand, wenn sie angeklickt und losgelassen wird.

Wie man :focus und :active unterscheidet

Obwohl es bei einem Element scheinbar ähnlich ist angeklickt, :focus und :active sind unterschiedliche Zustände. Wenn ein Benutzer auf ein Element klickt, erhält es sowohl den Fokus als auch die Aktivierung, was zum Status :focus:active führt. Diese Zustände können jedoch unabhängig voneinander ausgelöst werden. Beispielsweise kann ein Element ohne Aktivierung (z. B. mit der Tabulatortaste) fokussiert werden und umgekehrt.

Beispiel

Bedenken Sie den folgenden HTML- und CSS-Code:

<style>
  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>

Wenn Sie sich auf die Schaltfläche konzentrieren (mit der Tabulatortaste), ohne darauf zu klicken, wird der Text nur rot. Wenn Sie auf die Schaltfläche klicken, wird der Text rot und fett, was anzeigt, dass die Schaltfläche sowohl fokussiert als auch aktiviert ist.

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen den :focus- und :active-Pseudoklassen von CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!