一个不显眼的 a:visited 技术

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 提供适合您旅程每个阶段的云产品。立即开始使用 价值 200 美元的免费积分!

更新:几年之后 这篇文章发布,它被发现 :visited 选择器 可能是一个安全问题。现在您可以使用选择器的功能更加有限了。

color、background-color、border-*-color 和 outline-color 以及 (SVG) fill 和 stroke 属性的颜色部分

为了后代,我会保留这篇文章。您仍然可以使用选择器并使其不显眼。

您可能知道,您可以在 CSS 中定义 a:visited 的样式,它将应用于访问者浏览器中他们已经访问过的链接。这个功能的实用性是有争议的,但无论如何,最好不要将任何过于醒目或独特的样式应用于此。充其量,这可能会让您的访问者感到些许烦躁。最糟糕的是,这可能会让访问者感到困惑,以至于他们不再返回。

网页趋势通常也会远离链接下划线。至少对于内容中间的链接来说是这样。使用不同的颜色会更时尚。或者也许,不同的字体粗细。

我建议使用这种非常不显眼的方法来处理帖子内容中的链接

p {
  color: #666666;
}

a { 
  font-weight: bold;
  text-decoration: none;
  color: #2a2a2a;
}

a:visited {
  font-weight: normal;
}

a:hover {
  text-decoration: underline;
}

nonannoyingvistedlinks.gif

在本例中,所有链接都是稍微深一点的灰色。未访问过的链接是粗体,而访问过的链接恢复为普通字体粗细,因此可以更好地融入内容中。

这项技术肯定会在 CSS-Tricks 的新版本中使用(提示,提示)。