Quelle est la différence entre les pseudo-classes :focus et :active de CSS ?

Distinction entre les pseudo-classes :focus et :active

Comprendre la différence entre les états :focus et :active est crucial lorsque l'on travaille avec CSS. Ces pseudo-classes représentent des états d'élément distincts qui entrent en jeu lors de l'interaction avec des éléments HTML.

Qu'est-ce que :focus ?

L'état :focus indique qu'un élément a reçu le focus d’entrée. Cet état est généralement déclenché lorsqu'un élément reçoit une saisie au clavier ou lorsque l'utilisateur le sélectionne à l'aide d'autres mécanismes focalisables. Les éléments comme les éléments de formulaire (:input, :button, :a), frame/:iframe se comportent de cette façon.

Qu'est-ce que :active ?

L'état :active représente un élément en cours d'activation par l'utilisateur. Cet état est courant dans les scénarios interactifs, par exemple lorsqu'un utilisateur clique sur un bouton ou appuie sur une touche. Par exemple, un bouton entre généralement dans l'état :active lorsqu'il est cliqué et est relâché.

Comment différencier :focus et :active

Bien qu'apparemment similaire lorsqu'un élément est cliqué, :focus et :active sont des états distincts. Lorsqu'un utilisateur clique sur un élément, il reçoit à la fois le focus et l'activation, ce qui entraîne l'état :focus:active. Toutefois, ces états peuvent être déclenchés indépendamment. Par exemple, un élément peut être focalisé sans activation (par exemple, en utilisant une tabulation) et vice versa.

Exemple

Considérez le code HTML et CSS suivant :

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

Lorsque vous vous concentrez sur le bouton (en utilisant l'onglet) sans cliquer dessus, le texte deviendra uniquement rouge. Lorsque vous cliquez sur le bouton, le texte devient rouge et gras, indiquant que le bouton est à la fois focalisé et activé.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!