Comment styliser `a:before` avec les pseudo-classes `:hover` et `:visited` ?

Réponse à l'invocation de 'a:before' avec les conditions ':hover' et ':visited'

L'incapacité d'utiliser avec succès ' a:before:hover' découle d'une compréhension fondamentale de la syntaxe CSS. Pour appliquer correctement les styles à un pseudo-élément 'a:before' lorsqu'un élément 'a' correspond à une pseudo-classe, le format doit être 'a:hover:before' ou 'a:visited:before'. Cela signifie que le pseudo-élément vient après la pseudo-classe dans le sélecteur.

En CSS3, l'utilisation de doubles deux-points (par exemple, 'a:hover::before' ou 'a:visited::before ') améliore la clarté dans la distinction des pseudo-classes des pseudo-éléments. Cependant, les deux-points simples conviennent aux navigateurs existants comme IE8 et versions antérieures.

L'ordre des pseudo-classes et des pseudo-éléments est strictement défini dans la spécification. Un pseudo-élément ne peut être ajouté qu'à la fin d'une séquence de sélecteurs simple, qui est une chaîne de sélecteurs sans combinateurs. Un sélecteur simple comprend des sélecteurs de type, des sélecteurs universels, des sélecteurs d'attributs, des sélecteurs de classe, des sélecteurs d'ID et des pseudo-classes. Alors que les pseudo-classes sont de simples sélecteurs, les pseudo-éléments ne le sont pas.

Cependant, pour les pseudo-classes d'action utilisateur comme ':hover', si l'effet souhaité est limité à l'interaction de l'utilisateur avec le pseudo-élément, cela n'est actuellement pas réalisable via CSS standard. Au lieu de cela, ':hover' doit être appliqué à un élément enfant réel.

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!