J'ai défini le style de l'hyperlien à l'aide de CSS, mais le survol (Hover de souris) ne fonctionne pas lors de la navigation. Pourquoi cela se produit-il? Est-ce un problème de navigateur?
répondre:Bien que vous pensiez que la raison peut être un problème de navigateur, il est plus probable que votre définition de style soit une commande incorrecte. Afin de vous assurer que vous pouvez voir les styles de connexion dans différents états, l'ordre de style correct doit être:
Lien - Visité - Hover - actif ou LVHA (abréviation).
Contenu de base:
Chaque sélecteur a une spécificité. Si deux sélecteurs sont appliqués au même élément, les sélecteurs avec une spécificité plus élevée gagneront et auront la priorité. Par exemple:
p.Hithere {couleur: vert;} / * spécificité = 1,1 * /
p {couleur: rouge;} / * spécificité = 1 * /
Tout contenu de paragraphe avec classe Class = Hithere est affiché en vert au lieu de rouge. Les deux sélecteurs ont un ensemble de couleurs, mais les sélecteurs avec une spécificité plus élevée gagneront.
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 spécifique:
a: lien {couleur: bleu;} / * spécificité = 1,1 * /
a: actif {couleur: rouge;} / * spécificité = 1,1 * /
A: Hover {couleur: magenta;} / * spécificité = 1,1 * /
A: Visité {couleur: violet;} / * spécificité = 1,1 * /
Ce sont des paramètres de style pour les hyperliens. Dans la plupart des cas, plusieurs de ces styles doivent être réglés en même temps. Par exemple, un hyperlien non visité peut être défini dans différents styles dans le survol de la souris et l'activation de la souris lors du plan de planage et de cliquer. Étant donné que les trois règles ci-dessus peuvent être appliquées aux hyperliens et que tous les sélecteurs ont la même spécificité, puis selon les règles, le dernier style gagne. Ainsi, le style actif ne sera jamais affiché car il est toujours couvert par le style de survol (c'est-à-dire que le survol est préféré). Analyons maintenant quel est l'effet de la souris hyperlienne qui a été visité, et le résultat est toujours violet: (parce que son style visité a toujours priorité sur d'autres règles de style d'État (y compris actif et plané).
C'est pourquoi CSS1 recommande l'ordre de style:
A: Lien
R: Visité
R: Rocher
R: actif
En fait, l'ordre des deux premiers styles peut être échangé, car un hyperlien ne peut pas exister en même temps que les États non atteints et accessibles. (: Lien signifie non visité; je ne sais pas pourquoi il n'est pas défini comme ça.)
CSS2 permet désormais aux pseudo-classes d'apparaître dans les groupes syndicaux, par exemple:
A: Visité: Hover {Color: Maroon;} / * spécificité = 2,1 * /
A: lien: Hover {couleur: magenta;} / * spécificité = 2,1 * /
A: Hover: actif {couleur: cyan;} / * spécificité = 2,1 * /
Ils ont la même spécificité, mais ils s'appliquent à des bêtes fondamentalement différentes, et ne sont donc pas en conflit. Vous pouvez obtenir des combinaisons actives en survol, par exemple.
Comment comprendre la spécificité impliquée dans cet article? La spécificité peut être comprise comme une chaîne numérique qui n'est pas simplement connectée ensemble, un exemple ci-dessus:
p.Hithere {couleur: vert;} / * spécificité = 11 * /
p {couleur: rouge;} / * spécificité = 1 * /
Cela semble être une opération simple basée sur une décimale. Cependant, le calcul de la spécificité ne peut pas utiliser des algorithmes décimaux. Par exemple, si vous utilisez 15 sélecteurs ensemble, leurs valeurs pondérées spécifiques sont toujours inférieures aux sélecteurs de classe simples. Par exemple:
.hello {couleur: rouge;} / * spécificité = 10 * /
Html Body Div ul li ol li ul li li ol li ul li ul li ol li (couleur: vert;} / * spécificité = 15 * /
10 est en fait une spécificité qui suit 1 puis zéro, pas dix. Nous pouvons utiliser l'hexadécimal pour décrire les règles de style précédent, comme ce qui suit:
.hello {couleur: rouge;} / * spécificité = 10 * /
Html Body Div ul li ol li ul li li ol li ul 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 règle du deuxième style, vous pouvez obtenir un 17 spécifique qui sera à nouveau confus. En fait, la spécificité peut être infinie, donc pour éviter plus de confusion, il est recommandé d'utiliser des virgules pour séparer la valeur spécifique.
Le webmaster suggère: répéter le calcul de la valeur pondérée de la spécificité. Le réglage du site Web CSS reflète votre capacité à contrôler la page. Dans le développement de sites Web dynamiques, le statut de CSS est également très important. Lisez plus d'informations, pratiquez plus et concevez plus de pages Web! Si vous aimez ce site, faites-le promouvoir en votre nom! Merci d'avoir lu.