padrão a: hover substituindo aqueles com aulas IE6

Question

Eu tenho um padrão um: estilo foco da seguinte forma:

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

No entanto, quando tentando aplicar uma classe, tais como:

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

sem o font-size, então ele muda-o tamanho da fonte de volta para 8pt. Agora isso parece como ele deve funcionar no entanto isso não acontece no IE7, Firefox, Chrome. (Ele faz o trabalho no IE6)

Update: no Firebug ele realmente mostra font-size em um:. Pairar foi substituído, mas pelo que eu não sei

Qualquer um tem alguma idéia?

Answer 1

Eu acredito que é porque a:hover é mais específico do que a:link.

Se o a:hover font-size original não especificada, seria herdada de a:link. Mas uma vez que existe uma especificação a:hover, a.myclass:hover vez leva esse valor do que o a.myclass:link mais "geral".

Eu li em algum lugar para pensar dos a pseudo-classes como "ódio amor": :link, :visited, :hover, :active, mais um específico do que o anterior. Se você definir algo para a ou :link, deve ser herdada por todas as seguintes pseudo-classes. Esse valor pode ser substituído, porém, e a especificidade da pseudo-classe é mais importante do que a ordem em que os estilos são definidos ou o que outras classes "reais" estão ligados ao link.

A razão que funciona de forma diferente no IE6 é que o IE6 não é errado, o que não deve vir como uma surpresa.

As diferenças de análise (possivelmente para trás):

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

Como deve ser:

Cada :hover, independentemente de .class, é 8pt.

Como IE6 entende:

:hover não está na mesma classe como .myclass:hover. Como não há tamanho especificado para .myclass:hover, vamos herdar a partir da próxima maior disponível pseudo-classe na mesma classe, que é .myclass:link. Isso faz .myclass:hover 14px.

estimado lookup prioridades:

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

isso é por causa da maneira os estilos estão sendo aplicadas se você iria expandir as classes que se obtém:

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}

Agora, se expandir isso para mostrar o que está acontecendo:

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

este efeito é, na verdade, ainda mais estranho e mais complicado se você começar a misturar todos os efeitos ao redor (fronteira / preenchimento / margem) e secundários únicos (border-right; margin-top; padding-left) em tais constelações.