隐私与 :visited 选择器

善意的谎言

为了保护用户隐私，浏览器在某些情况下会对Web应用程序撒谎

• window.getComputedStyle方法和类似函数，例如element.querySelector，总是返回表示用户从未访问过页面上任何链接的值。
• 当使用兄弟选择器（如:visited + span）时，相邻元素（本例中的span）的样式将表现为链接未被访问过。
• 在极少数情况下，如果您使用嵌套链接元素且匹配的元素与正在测试其历史记录中是否存在链接的元素不同，则该元素将表现为链接未被访问过。

已访问链接样式的限制

您可以对已访问链接进行样式设置，但可使用的样式种类有限。只有以下样式可以应用于已访问链接：

• color
• background-color
• border-color（及其子属性）
• column-rule-color
• outline-color
• text-decoration-color
• text-emphasis-color
• fill和stroke属性的颜色部分

此外，即使对于上述样式，未访问链接和已访问链接之间的透明度差异也不会被应用。此限制阻止了在各种<color>函数中使用alpha参数或使用transparent关键字来区分这两种状态。

以下是样式与上述限制一起使用的示例：

:link {
  outline: 1px dotted blue;
  background-color: white;
  /* The default value of `background-color` is `transparent`. You need to
     specify a different value, otherwise changes on `:visited` won't apply. */
}

:visited {
  outline-color: orange; /* Visited links have an orange outline */
  background-color: green; /* Visited links have a green background */
  color: yellow; /* Visited links have yellow colored text */
}

对Web开发人员的影响

在开发网站时，您可能需要考虑以下事项：

• 根据链接的访问状态更改background-image值将不起作用，因为只有颜色可以用于设置已访问链接的样式。
• 通过:visited选择器设置样式时，原本透明的颜色将不会应用。

另见

• 通过CSS :visited选择器防止对用户历史记录的攻击 (2010)