时间戳

首页 > 解决方案 > 'a:link {color}' CSS 选择器的问题

css - 'a:link {color}' CSS 选择器的问题

问题描述

我想更改页面上所有链接的颜色，但它不能在 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>

标签： csscss-selectors

解决方案

样式化锚链接可能有点棘手。有几个伪类以及基本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与代码片段中的规则仅适用于最后一个链接）。

推荐阅读