проблемы с CSS-селекторами 'a: link {color}' - PullRequest
0 голосов
/ 21 февраля 2019

Я хочу изменить цвет всей моей ссылки на странице, но она не работает на Chrome, отлично работает на Opera.я не понимаю, что происходит, вы можете помочь мне заставить его работать на каждом браузере?

a:link
{
  color: rgb(255, 169, 73);
  text-decoration: none;
}
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Lake Towada</title>
    <link rel="stylesheet" href="CSS/style.css">
  </head>

<body>
    <p>
      some text<a href="https://www.japan-guide.com/e/e3775.html" target="-_blank">Oirase</a>
      some text<a href="https://www.japan-guide.com/e/e3780.html" target="-_blank">the mountains</a>some more text
      </p>
</body>

1 Ответ

0 голосов
/ 28 февраля 2019

Оформление якорных ссылок может быть немного сложнее.Существует несколько псевдоклассов, а также базовый селектор тегов 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 (по этой причине правило в фрагменте кода является толькоприменяется к последней ссылке).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...