CSS中的超链接颜色样式

Question

超链接的初始颜色是蓝色，即访问选择器的颜色。但是背景颜色是黑色的，即链接选择器的颜色。此外，访问链接一次后，文本颜色保持应有的蓝色，但背景不会变为透明。

这是样式代码：

<style>
a:link {
  color: pink;
  background-color: black;
  text-decoration: none;
}
a:visited {
  color: blue;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>
</head>
<body>

<h2>Link Colors</h2>

<a href="html_images.asp" target="_self">HTML Images</a> 

</body>
</html>

我无法理解链接选择器的行为。为什么格式不明确，并且从两个不同且独占的选择器中得到随机混合输出？

Answer 1

已访问：已访问过的链接（存在于浏览器历史中），使用:visited 伪类设置样式。

因此，如果您至少访问过一次您的链接，它将始终是visited

您可以阅读有关此here 的更多信息。

Answer 2

您需要为锚标记添加一些背景颜色，并添加 link withvisited 以便visited 像 a:visited:link 一样工作。试试下面的 CSS：

a:link {
  color: pink;
  background-color: black;
  text-decoration: none;
}
a:visited:link {
  color: blue;
  background-color: transparent !important;
  text-decoration: none;
}
a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}

a {
  background-color: #fff;
}