Оформление якорных ссылок может быть немного сложнее.Существует несколько псевдоклассов, а также базовый селектор тегов a
, который можно использовать для стилизации, которые влияют на ссылки в зависимости от их состояния.
/* newly added in the CSS selectors Level 4 specification */
:any-link, p :any-link{
color:black;
}
/* it is recommended to always have the pseudo classes it in this order */
:link{
color:blue;
}
:visited{
color:mediumvioletred;
}
:hover{
color:mediumaquamarine;
}
:active{
color:green;
}
/* lowest specificity, so it will not be applied */
a{
color:green;
}
<div><a href="#">This link starts out blue.</a></div>
<div><a href="https://www.google.com/">This link *might* be violetred in your browser.</a></div>
<div><a href="https://www.facebook.com/">So might this.</a></div>
<div class="special"><a href="#">Hovering will turn the links aquamarine.</a></div>
<p><a href="#">This link is black in browsers that support the new pseudo class. It also won't have any hover effects.</a></p>
Если вы когда-либо посещали одну из ссылок в вашем фрагменте кода в браузере Chrome (но не в Opera), она будет иметь другой цвет.
Скорее всего, одна или две ссылки из предоставленного мною фрагмента кода уже будут другого цвета, потому что вы посещали один из этих сайтов в прошлом.
Для достижения стабильного результата, явно установите оба значения :link
и :visited
и помните о специфичности селектора .
Вы можете использовать :any-link
для достижения последовательных результатов, что фактически совпадает с :link,:visited
но имейте в виду, что не все браузеры поддерживают этот новый псевдокласс еще и имеют одинаковую базовую специфику, поэтому его необходимо объявить last (по этой причине правило в фрагменте кода является толькоприменяется к последней ссылке).