Вот как я это понимаю. Все эти псевдо классы имеют одинаковую специфичность, поэтому, наконец, побеждает псевдокласс. Теперь, что делают псевдоклассы :link, :visited, :focus, :hover, :active
? Давайте посмотрим один за другим.
a: link{color: red}
сообщает агенту пользователя о том, чтобы красить якорный элемент в любом состоянии. Выполните следующий скрипт:
a:link {
color: red;
}
<a href="www.stackoverflow.com">Go to stackoverflow </a>
Якорный элемент окрашен в красный цвет в следующих состояниях тогда и только тогда, когда ссылка не показана ,
Таким образом, a: link{color: red}
сообщает агенту пользователя, чтобы он отображал красный цвет для элемента привязки во всех вышеперечисленных состояниях. Теперь давайте сравним его с псевдосемейством a:hover
. Запустите следующий скрипт
a:hover {
color: red;
}
<a href="www.stackoverflow.com">Go to stackoverflow </a>
Якорный элемент окрашен в красный цвет в следующих состояниях:
Мы видим, что псевдо-классы :link
и :hover
способны определять состояние hover
- So если вы назначаете эти два псевдокласса конкретному элементу, выигрывает тот, который указан, наконец, в css-файле. По этой причине мы говорим, что :link
будет отменять :hover
, если первое упоминается ниже. Это же понятие справедливо и для других псевдоклассов. Я хотел бы дать список того, что делает каждый псевдокласс.
a:link {...}
задает следующие состояния невидимой ссылки - Focused (Tabbed) - hovered - Active (Clicked)blockquote>
link
состояние будет переопределять любое другое состояние.
a:visited {...}
устанавливает следующие состояния посещенной ссылки: - Фокусировано (вкладка ) - hovered - Active (Clicked)
a:visited {...}
будет переопределять любое другое состояние, кроме:link
, если и только если ссылка была посещена .Обратите внимание, что , посетивший , означает, что его следует считать посещенным в кеше пользовательского агента. Например. веб-сайт, посетивший 10 дней назад, может не быть в кеше пользовательского агента, тогда он будет технически рассмотрен unvisited .
blockquote>
a:focus {...}
устанавливает следующие состояния для посещенных и непересекающихся ссылок: - Фокусировка (вкладка) - зависание - активна (нажата)blockquote>
a:focus {...}
переопределяет состояния:hover
и:active
.
a:hover {...}
устанавливает следующие состояния как для посещенных, так и для невидимых ссылок: - hovered - Active (Clicked)< / blockquote>
a:hover {...}
переопределяет:active
состояние
a:active {...}
устанавливает следующие состояния как для посещенных, так и для невидимых ссылок:BLOCKQUOTE>
- Активный (нажал)