Ne pas oublier :
En appliquant une CSS aux différents états d'un lien vous devez penser à l'ordre des règles. Dans la plupart des cas vous allez les indiquer dans cet ordre :link :visited :hover :active LVHA. L'ordre est affecté spécifiquement. Chaque sélecteur a une spécificité. Si deux sélecteurs sont appliqués au même élément, celui qui a une plus grande spécificité l'emporte.
Voyons comment les pseudos-classes sont elles affectées, ils ont tous la même importance et donc les styles suivant ont tous la même spécificité : a:link {color:blue;} /* specificité = 1.1 */
a:active {color:red;} /* specificité = 1.1 */
a:hover {color:magenta;} /* specificité = 1.1 */
a:visited {color:purple;} /* specificité = 1.1 */
Tous peuvent s'appliquer à un hyperlien, et dans certains cas, plusieurs seront appliqués. Par exemple, un lien non visité peut être un lien de survol et actif en même temps puisque c'est un lien non visité. Puisque trois des règles ci-dessus s'appliquent à l'hyperlien, et que tous les sélecteurs ont la même spécificité, c'est le dernier sélecteur qui l'emporte. Par conséquent, le style "actif" n'apparaîtra jamais, parce qu'il sera toujours dépassé par le style de "lien de survol". Considérons maintenant un hyperlien qui a été visité. Il est toujours et pour toujours violet, parce que son style "visité" l'emporte sur tous les autres états y compris "actif" et de "survol".
Voici pourquoi l'ordre en CSS est : a:link
a:visited
a:hover
a:active
Partager