Explication détaillée de l'application des quatre états de production de pages hyperconnection_HTML/Xhtml_Web

Bien que vous pensiez que la cause possible est un problème de navigateur, il est plus probable que l'ordre de vos définitions de style soit erroné. Afin de garantir que vous pouvez voir les styles de connexion dans différents états, l'ordre correct des styles doit être :

" lien - visité - survol - actif " ou " LVHA " (abréviation).

Contenu principal :

Chaque sélecteur a une "spécificité". Si deux sélecteurs sont appliqués au même élément, le sélecteur avec la spécificité la plus élevée gagnera et sera prioritaire. Par exemple :

P.hithere {couleur : vert ;} /* spécificité = 1,1 */P {couleur : rouge ;} /* spécificité = 1 */

Tout contenu de paragraphe avec class=hithere est affiché en vert au lieu de rouge. Les deux sélecteurs définissent la couleur, mais le sélecteur ayant la spécificité la plus élevée l'emportera.

Comment les pseudo-classes affectent-elles la spécificité ? Ils ont exactement la même valeur de pondération, et les styles suivants ont la même valeur de pondération de spécificité :

A:link {color: blue;} /* spécificité = 1,1 */A:active {color: red;} /* spécificité = 1,1 */A:hover {color: magenta;} /* spécificité = 1,1 */A:visited {color: purple;} /* spécificité = 1,1 */

Ce sont des paramètres de style pour les hyperliens. Dans la plupart des cas, il est nécessaire de définir plusieurs styles en même temps. Par exemple, un lien hypertexte non visité peut définir différents styles dans les deux états « survol de la souris » et « activation de la souris » lorsque la souris survole et clique. Les trois règles ci-dessus peuvent toutes être appliquées aux hyperliens, et tous les sélecteurs ont la même spécificité, donc selon les règles, le dernier style « gagne ». Ainsi, le style "actif" ne sera jamais affiché car il est toujours remplacé par le style "survol" (c'est-à-dire que "survol" est prioritaire). Analysons maintenant l'effet du survol de la souris sur un lien hypertexte qui a été visité. Le résultat est toujours violet :(, car son style "visité" a toujours priorité sur les autres règles de style d'état (y compris "actif" et "survol").

C'est pourquoi CSS1 recommande l'ordre des styles :

A:linkA:visitedA:hoverA:active

En fait, l'ordre des deux premiers styles peut être inversé, car un lien hypertexte ne peut pas avoir à la fois les états "non visité" et "visité". ( :link signifie " non visité " ; je ne sais pas pourquoi ce n'est pas défini de cette façon.)

CSS2 permet désormais aux pseudo-classes d'apparaître sous une forme "groupe rejoint", par exemple :

A:visited:hover {color: marron;} /* spécificité = 2,1 */A:link:hover {color: magenta;} /* spécificité = 2,1 */A:hover:active {color : cyan;} /* spécificité = 2,1 */

Ils ont la même spécificité, mais ils s'appliquent à des bêtes fondamentalement différentes, et n'entrent donc pas en conflit. Vous pouvez par exemple obtenir des combinaisons de survol

.

Comment comprendre la « spécificité » impliquée dans cet article ? La spécificité peut comprendre des chaînes de nombres qui ne sont pas simplement connectées entre elles. Un exemple ci-dessus : P.hithere {color: green;} /* spécificité = 11 */P {color: red;} /* spécificité = 1 */

Cela semble être une simple opération décimale. Cependant, l'algorithme décimal ne peut pas être utilisé pour calculer la « spécificité ». Par exemple, si vous utilisez 15 sélecteurs ensemble, leurs valeurs pondérées de « spécificité » seront toujours inférieures à celles des sélecteurs de classe simples. Exemple :

.hello {couleur : rouge;} /* spécificité = 10 */HTML BODY DIV UL LI OL LI UL LI OL LI UL LI OL LI (couleur : vert ;} /* spécificité = 15 */

"10" est en fait un "1" suivi de "zéro", et non de "dix". On peut utiliser l'hexadécimal pour décrire la spécificité des règles de style précédentes, comme ceci :

.hello {couleur : rouge;} /* spécificité = 10 */HTML BODY DIV UL LI OL LI UL LI OL LI UL LI OL LI (couleur : vert ;} /* spécificité = F */

Le seul problème est que si vous souhaitez ajouter deux sélecteurs ou plus à la deuxième règle de style, vous risquez d'obtenir une spécificité de "17", ce qui provoquera à nouveau une confusion. En fait, la spécificité peut être infinie, donc pour éviter toute confusion supplémentaire, il est recommandé d'utiliser des virgules pour séparer les valeurs de spécificité.

Suggestion du webmaster : Pratiquez à plusieurs reprises le calcul de la valeur pondérée de la spécificité. Le paramétrage du CSS du site Web reflète votre capacité à contrôler la page. Dans le développement de sites Web dynamiques, le statut du CSS est également très important. En savoir plus Informations, pratiquez davantage, venez davantage sur Script Home ! Si vous aimez ce site, faites-en la promotion ! Merci d'avoir lu.