Почему a: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 style и поместите его после него в таблице стилей:

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

Answer 2

Возникла проблема с порядком, как описано в W3Schools:

Примечание:A: Hover должен прийти после: ссылка и a: посещение в определении CSS, чтобы быть эффективным !!

Примечание:A: Active должен прийти после: парить в определении CSS, чтобы быть эффективным !!

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