CSS 为什么不能使用:visited而不是a:visited来设置链接的样式

在本文中，我们将介绍为什么在CSS中不能使用”:visited”而不是”a:visited”来设置链接的样式。我们将探讨”:visited”的局限性以及为什么需要使用”a:visited”来改变链接的外观。

阅读更多：CSS 教程

为什么需要改变已访问链接的样式？

在网页中，链接是用户与网站之间导航的重要组成部分。用户在点击链接后，浏览器通常会将其标记为“已访问”，以便用户能够了解自己已经在哪些网站上浏览过。为了提供更好的用户体验，设计师可以通过更改已访问链接的样式来帮助用户更好地导航和记忆之前浏览过的页面。

例如，我们可以改变已访问链接的文本颜色、背景颜色和文本装饰（如下划线），以与未访问的链接区分开来。这样一来，用户在后续浏览页面时，能够清楚地看到自己已经访问过的链接，而无需再次点击。

“:visited”的局限性

在CSS2规范中，引入了”:visited”伪类选择器来选取已访问链接，从而允许我们改变其样式。然而，由于安全和隐私原因，浏览器对”:visited”有严格的限制。这是因为攻击者可以通过检查”:visited”选择器是否应用于某个元素，从而获取用户浏览历史的敏感信息。

为了保护用户的隐私，现代浏览器使用了一种称为“同源策略”的安全机制，限制了对”:visited”选择器的使用。只有当两个链接指向同一个域名时，”:visited”才会生效。这意味着，对于跨域链接（例如，链接到其他网站的链接），”:visited”不会改变链接的样式，因为无法获取链接的访问状态。

a:visited的功能和使用

为了解决”:visited”的安全和隐私问题，CSS3引入了更加灵活和安全的”a:visited”选择器。使用”a:visited”，我们可以自由设置链接的样式，无论它们链接到哪个域名。这样一来，用户在浏览不同网站时，仍然可以通过样式区分已访问和未访问的链接。

下面是一个示例：

a:link {
  color: blue;
  text-decoration: none;
}

a:visited {
  color: purple;
}

a:hover {
  color: red;
}

a:active {
  color: green;
}

在上面的示例中，我们使用”a:link”设置了未访问链接的样式为蓝色，没有下划线。而使用”a:visited”则将已访问链接的颜色设置为紫色。当鼠标悬停在链接上时，我们通过”a:hover”将文字颜色改为红色。当用户点击链接时，我们使用”a:active”将文字颜色改为绿色。

通过使用”a:visited”，我们可以为已访问链接设置不同的样式，提供更好的用户体验和导航。

总结

在CSS中，我们不能使用”:visited”来改变链接的样式，而是需要使用”a:visited”。这是因为”:visited”由于安全和隐私问题受到限制，只有同源链接才能应用此选择器。而”a:visited”则允许我们自由地设置已访问链接的样式，无论它们链接到哪个域名。设置已访问链接的样式可以帮助用户更好地导航和记忆之前浏览过的页面，提供更好的用户体验。