Standard a: hover zwingend diejenigen mit Klassen IE6

Question

ich ein Standard-a habe: Hover-Stil wie folgt:

a:hover { color: black; font-size: 8pt } 

jedoch beim Versuch, eine Klasse wie anwenden:

a.myclass:link { font-size: 14px } 
a.myclass:hover { color: red } 

ohne die Schrift -size, dann ändert sich die Schriftgröße wieder auf 8pt. Nun scheint dies wie es funktionieren sollte, aber es passiert nicht in IE7, Firefox, Chrome. (Es funktioniert in IE6)

Update: In Firebug zeigt es tatsächlich Schriftgröße auf a: Hover wurde außer Kraft gesetzt, aber durch was ich nicht weiß.

Irgendwelche Ideen?

Answer 1

Ich glaube es ist, weil a:hover spezifischer als a:link ist.

Wenn die ursprüngliche Schriftgröße a:hover nicht angegeben wurde, würde sie von a:link geerbt werden. Aber da es eine a:hover Spezifikation gibt, nimmt a.myclass:hover eher diesen Wert als der "allgemeinere" a.myclass:link.

Ich habe irgendwo gelesen, der a Pseudo-Klassen als „Liebe Hass“ zu denken: :link, :visited, :hover, :active, ein spezifischer als die vorherige. Wenn Sie etwas für a oder :link definieren, sollte es von allen folgenden Pseudoklassen geerbt werden. Dieser Wert kann jedoch außer Kraft gesetzt werden, und die Spezifität der Pseudoklasse ist wichtiger als die Reihenfolge, in der die Stile definiert sind oder welche anderen "echten" Klassen an den Link angehängt sind.

Der Grund, dass es in IE6 anders funktioniert, ist, dass IE6 es falsch macht, was nicht überraschen sollte.

Unterschiede beim Parsen (möglicherweise nach hinten):

a:hover { font-size: 8pt } 
a.myclass:link { font-size: 14px } 
a.myclass:hover { } 

Wie es sein sollte:

Jeder :hover, unabhängig von .class, 8pt ist.

Wie IE6 versteht es:

:hover ist nicht in der gleichen Klasse wie .myclass:hover. Da für .myclass:hover keine Größe angegeben ist, erben wir von der nächsthöheren verfügbaren Pseudoklasse in derselben Klasse, nämlich .myclass:link. Das macht .myclass:hover 14px.

Geschätzte Lookup-Prioritäten:

Others   IE6 

a     a 
a.class   a:link 
a:link   a:hover 
a.class:link  a.class 
a:hover   a.class:link 
a.class:hover  a.class:hover <-- Lookup starts here, goes up. 

Answer 2

das ist wegen der Art, die Stile wird angewendet, wenn Sie die Klassen erweitern würden Sie erhalten würden:

a{ color:red; font-size:10pt;} 
a:hover {font-size:8pt; color:black} 
a.myclass{font-size:6pt;text-decoration:none;} 
a.myclass:hover {color:red} 

jetzt, wenn wir das, was los ist zu zeigen, erweitern:

a.myclass{font-size:6pt;text-decoration:none;**color:red**} /* got the color from a - we overrode the font size */ 
a.myclass:hover {color:red;text-decoration:none;font-size:8pt} /* we got the text-decoration from a.myclass - but a:hover overrides myclass so we got the 8pt from there */ 

Dieser Effekt ist in Wirklichkeit sogar noch seltsamer und komplizierter, wenn Sie in solchen Konstellationen beginnen, alle Effekte (Rand/Padding/Rand) und Side Ones (Rand rechts; Rand oben; Padding-links) zu mischen.