Un des points de test CSS, balise , pseudo-classe

1. Aperçu des pseudo-classes couramment utilisées dans les balises <a>

    a:link{color:blue}                                                     
    a:visited{color:red}
    a:hover{color:green}
    a:active{color:purple}

• link Lorsqu'il y a un lien et que le lien n'a pas été visité, ce pseudo -class est activé.

• vistied Cette pseudo-classe est active lorsqu'un lien a été visité.

• hover Lorsque la souris survole un lien, cette pseudo-classe est active jusqu'à ce que la souris s'éloigne du lien.

• active Cette pseudo-classe est activée lorsqu'un lien est cliqué avec la souris. Notez que la souris n'est pas relâchée après un clic. Cette pseudo-classe est active jusqu'à ce que la souris soit relâchée.

• 2. <a>Explication détaillée de l'ordre d'écriture des pseudo-classes de balises

• Pourquoi devrions-nous considérer l'ordre d'écriture des pseudo- des cours ?

  Tout d'abord, le nom complet de CSS (Cascading Style Sheets) est traduit par Cascading Style Sheets. Parfois, plusieurs règles définissent le même attribut d’un élément. Que devons-nous faire dans ce cas ? CSS utilise un principe en cascade pour considérer les déclarations de style afin de déterminer laquelle des règles en conflit doit prendre effet. Tout d’abord, si le style que vous écrivez entre en conflit avec le style par défaut du navigateur, le style que vous écrivez prévaudra. Sur cette base, CSS utilise le principe de cascade pour considérer la spécificité, l'ordre et l'importance afin de déterminer quelle règle parmi les règles en conflit doit prendre effet. Ne vous laissez pas emporter par la terminologie, essayez-la et vous comprendrez comment CSS détermine quels styles appliquer et quand. ¹
  Deuxièmement, puisque les quatre pseudo-classes de la balise <a> ont la même particularité, lorsqu'un lien est dans un état où plusieurs pseudo-classes sont activées en même temps, alors L'ordre d'écriture des pseudo-classes joue un rôle clé, affectant ainsi l'effet d'affichage final. C'est pourquoi il faut considérer l'ordre dans lequel les pseudo-classes sont écrites.

Quelles pseudo-classes seront activées en même temps et affecteront l'effet d'affichage ?

  Premièrement, en fait, l'ordre entre les deux pseudo-classes :link et :visited n'a pas d'importance. Parce qu'ils ne peuvent pas être déclenchés en même temps, c'est-à-dire qu'ils ont été visités en même temps alors qu'ils ne l'ont pas été. Notez ici que certaines personnes comprennent :link comme signifiant que tant qu'un lien existe pour un élément, il sera activé. C'est faux. Une fois le lien visité, :link n'est plus actif. Faisons une expérience.

a:visited{color:red}                                                 
a:hover{color:green}
a:active{color:purple}
a:link{color:blue}

On met :link à la fin. Au début, le lien n'a pas été visité. Peu importe que je survole ou que je clique sur la souris, la couleur ne changera pas, elle est toujours bleue. Lorsque je clique sur la souris pour la première fois et que je la relâche, la couleur passe au rouge. Ensuite, survolez-le à nouveau et il deviendra vert, cliquez à nouveau dessus et il deviendra violet, puis relâchez-le et il reviendra au rouge. Le bleu n'apparaîtra plus. A ce stade, le lien existe toujours, mais a été visité, donc la pseudo-classe :link n'est plus active.
Deuxièmement, du point de vue des habitudes des utilisateurs, que le lien soit visité ou non, nous espérons que la couleur changera lorsque la souris survolera le lien, et que le lien soit visité ou non, le changement de couleur devrait être le même. . Par conséquent, :hover doit être placé après :link et :visited

a:link{color:blue}                                                 
a:visited{color:red}

a:hover{color:green}

 Troisièmement, du point de vue des habitudes des utilisateurs, que le lien ait été visité ou non, on espère que lorsque la souris clique sur le lien, produit un changement de couleur, et le changement de couleur doit être le même, que le lien ait été visité ou non. Par conséquent, :active doit être placé après :link et :visited

a:link{color:blue}                                                
a:visited{color:red}

a:active{color:purple}

 Quatrièmement, en termes de séquence, passez toujours la souris sur le lien en premier, puis cliquez dessus L'effet attendu. Il produit un changement de couleur lors du survol et un autre changement de couleur lorsque vous cliquez sur la souris. Si vous placez le survol après actif, lorsque vous cliquez sur le lien, vous déclenchez en fait la pseudo-classe de survol tout en activant l'état actif. Le survol recouvre la couleur active derrière lui, vous ne pouvez donc pas voir la couleur active. Par conséquent, le survol vient avant l'actif. ²

a:link{color:blue}                                                   
a:visited{color:red}
a:hover{color:green}
a:active{color:purple}

  La formule pour mémoriser la commande : "LoVe, HA"

Un des plus points de test CSS, <a> articles liés aux cours Veuillez faire attention au site Web PHP chinois !