Почему: hover переопределяется в CSS?

Question

Если у меня есть этот CSS:

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

Ссылки под идентификатором всегда отображаются черным цветом при наведении курсора. Я знаю, что использование идентификатора дает более высокий приоритет, однако я не переопределяю селектор :hover, а только селектор :link, поэтому разве не должен отображаться курсор при наведении на красный?

Answer 1

Псевдокласс :link применяется к ссылке, даже если вы наводите указатель мыши на нее. Поскольку стиль с идентификатором более специфичен, он переопределяет другие.

Единственная причина, по которой стиль :hover переопределяет стиль :link, заключается в том, что он появляется позже в таблице стилей. Если вы разместите их в следующем порядке:

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

стиль :link позже в таблице стилей и переопределяет стиль :hover. При наведении на нее ссылка остается синей.

Чтобы стиль :hover работал для черной ссылки, вы должны сделать его как минимум таким же специфичным, как стиль :link, и поместить его после него в таблицу стилей:

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

Answer 2

Существует проблема заказа, как описано в W3Schools:

Примечание: a: hover ДОЛЖЕН идти после ссылки: и: посетил в определении CSS в чтобы быть эффективным !!

Примечание: a: active ДОЛЖЕН идти после a: hover в определении CSS для того, чтобы быть эффективный !!

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