Por que a: hover get anulado em CSS?

Question

Se eu tiver este CSS:

a:link { color: blue; }
a:hover { color: red; }
#someID a:link { color: black; }

Ligações sob a ID sempre aparece em preto sobre hover. Estou ciente de que usando um ID dá uma prioridade maior, no entanto, eu não estou substituindo o selector :hover, apenas o selector :link, por isso não deve a exibição pairar no vermelho?

Answer 1

A classe :link pseudo aplica à ligação, mesmo quando você está pairando sobre ele. Como o estilo com o id é mais específico que substitui os outros.

A única razão que o estilo :hover substitui o estilo :link em tudo é que ele vem mais tarde na folha de estilo. Se você colocá-los na seguinte ordem:

a:hover { color: red; }
a:link { color: blue; }

o estilo :link é mais tarde na folha de estilo e substitui o estilo :hover. As estadias de links azuis quando você passa o mouse sobre ele.

Para fazer o trabalho estilo :hover para o link preta você tem que fazê-lo, pelo menos, tão específico como o estilo :link, e colocá-lo depois na folha de estilo:

a:link { color: blue; }
a:hover { color: red; }
#someID a:link { color: black; }
#someID a:hover { color: red; }

Answer 2

Há um problema ordem, como explicado no W3Schools:

Nota: a: hover DEVE vir após a: link e a: visited na definição CSS em Para ser eficaz !!

Nota: a: MUST ativa vir após a: hover na definição CSS, a fim de ser eficaz !!

http://www.w3schools.com/CSS/css_pseudo_classes.asp