Quelle est la différence entre le et
les Pseudo-classes ?
Réponses
Trop de publicités?:focus
et :active
sont deux états différents.
:focus
représente l'état lorsque l'élément est l'élément actuellement sélectionné afin de recevoir des données à partir de périphériques d'entrée (clavier). :active
représente l'état lorsque l'élément est actuellement activé par l'utilisateur.
Nous allons mettre cela en perspective, avec un exemple. Disons que nous avons un <button>
. L' <button>
n'auront pas d'état pour commencer. Il existe juste. Si nous utilisons l'Onglet de "focus" pour l' <button>
, il entre maintenant dans sa :focus
de l'état. Si vous cliquez ensuite sur (ou appuyez sur la touche espace), vous pouvez vous rendre sur le bouton enter (:active
) de l'état.
Sur cette note, lorsque vous cliquez sur un élément, vous lui donnez l'accent, aussi, qui cultive l'illusion qu' :focus
et :active
sont les mêmes. Ils ne sont pas les mêmes. Lorsque cliqué sur le bouton en :focus:active
de l'état.
Un exemple:
<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, where my text just turns red
</button>
Active est quand l’utilisateur activer ce point (comme la souris en cliquant sur, si nous utilisons l’onglet de champs à ne rien aucun signe de style actif. Peut-être en cliquant sur faut plus de temps, juste essayer de tenir un clic sur ce point), mise au point est arrivé après le point est activé. Essayez ceci :