почему «a:hover ДОЛЖЕН идти после:link и:visited（w3school）»？

Я изучаю CSS в "w3schools", в главе "ссылка", там написано:

"При настройке стиля для нескольких состояний ссылки есть несколько правил порядка:

a:hover ДОЛЖЕН идти после:link, а:visited a:active ДОЛЖЕН идти после:hover"

Я хочу знать, почему правильный порядок - L.V.H.A, а не L.H.V.A или другой.


html css hyperlink pseudo-class
person Vayne    schedule 12.12.2015    source источник
comment
Я рекомендую вам MDN вместо w3schools. См.: w3fools.com.   -  person Michał Perłakowski    schedule 12.12.2015

Ответы (2)


arrow_upward
7
arrow_downward

Псевдоклассы должны быть объявлены в определенном порядке.

Мнемоника LoVe HAte всегда полезна для запоминания правильного порядка:

:link
:visited
:hover
:active

Каждый псевдокласс соответствует событию, которое может произойти только позже на временной шкале, чем предыдущее.

То есть:

  1. Ссылка считается непосещенной до того, как она будет посещена.

  2. Ссылка посещается до того, как на нее наведется курсор.

  3. Ссылка наводится, прежде чем она активно используется.

person Rounin    schedule 12.12.2015
comment
Итак, как вы сказали, правильный ли порядок: l (существует). H (наведите курсор, затем нажмите, чтобы посетить). A (когда я нажимаю, он активно используется). V (посещено)? - person Vayne; 12.12.2015
comment
Около. Любая ссылка, с которой вы еще не взаимодействовали, является либо непосещенной (:link), либо посещенной (:visited)... когда вы начинаете взаимодействовать со ссылкой, сначала вы наведите на него курсор (:hover), а затем щелкните по нему (:active). - person Rounin; 12.12.2015

arrow_upward
4
arrow_downward

Основная причина этого заключается в том, что последние правила выполняются после предыдущих, найденных в документе в CSS, по порядку, а это означает, что поведение последних будет выполняться после того, как все предыдущие совпадающие правила будут выполнены. Следовательно, их порядок имеет значение, чтобы избежать наложений, которые повлияют на поведение друг друга.

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

person Nick Louloudakis    schedule 12.12.2015
comment
Спасибо за ответ. Теперь я могу понять порядок ссылки и посещения, наведения и активности. Не могли бы вы дать мне объяснение и пример посещения и наведения? Я думаю, что правильный порядок - это навести курсор на него, а затем посетить его, не так ли? - person Vayne; 13.12.2015