default a: passa il mouse su quelli con classi ie6

Question

Ho uno stile predefinito a: hover come segue:

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

Tuttavia, quando si tenta di applicare una classe come:

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

senza la dimensione del carattere, quindi cambia la dimensione del carattere in 8pt. Ora questo sembra come dovrebbe funzionare, ma non succede in ie7, Firefox, Chrome. (Funziona in IE6)

Aggiornamento: in firebug mostra effettivamente la dimensione del carattere su un: hover è stato sovrascritto, ma da quello che non so.

Qualcuno ha qualche idea?

Answer 1

Credo sia perché a: hover è più specifico di a: link .

Se l'originale a: hover non era specificato, la dimensione del carattere sarebbe ereditata da a: link . Ma poiché esiste una specifica a: hover , a.myclass: hover prende piuttosto questo valore piuttosto che il più "generale". a.myclass:. Collegamento

Ho letto da qualche parte pensare alle pseudo-classi a come " love hate " ;: : link , : visitato , : hover , : active , uno più specifico del precedente. Se definisci qualcosa per a o : link , dovrebbe essere ereditato da tutte le seguenti pseudo-classi. Tuttavia, quel valore può essere sovrascritto e la specificità della pseudo-classe è più importante dell'ordine in cui gli stili sono definiti o quale altro "reale"; le classi sono allegate al link.

Il motivo per cui funziona in modo diverso in IE6 è che IE6 ha sbagliato, il che non dovrebbe sorprendere.

Differenze nell'analisi (possibilmente all'indietro):

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

Come dovrebbe essere:

  

Ogni : hover , indipendentemente da .class , è 8pt.

Come capisce IE6:

  

: hover non è nella stessa classe di .myclass: hover . Poiché non è stata specificata alcuna dimensione per .myclass: hover , ereditiamo dalla successiva pseudo-classe disponibile più alta nella stessa classe, che è .myclass: link . Questo rende .myclass: hover 14px.

Priorità di ricerca stimate:

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

questo è dovuto al modo in cui gli stili vengono applicati se espandessi le classi otterrai:

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}

ora se lo espandiamo per mostrare cosa sta succedendo:

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 */

questo effetto è in realtà ancora più strano e più complicato se inizi a mischiare effetti tutt'intorno (bordo / riempimento / margine) e solo laterali (bordo-destra; margine-alto; riempimento-sinistra) in tali costellazioni.