为什么这 a:visited css 样式不起作用？答案

【问题标题】：Why doesn't this a:visited css style work?为什么这 a:visited css 样式不起作用？
【发布时间】：2011-11-30 19:24:08
【问题描述】：

这在 Internet Explorer 或 Chrome 上不起作用有什么原因：

<html>
    <head>
        <style>
            A {font-weight: bold; color:black;}
            A:visited {font-weight: normal; color: black; }
            .Empty {font-weight: bold; color: black; }
        </style>
    </head>

    <body>
        <a href="http://mysite">click me</a>
    </body>
</html>

我点击的链接永远不会正常，只会保持粗体。在一些其他浏览器上它可以工作。

改变大小写并没有影响它。将a 更改为a:link 并没有影响它。改变颜色有效，只是字体粗细无效。

一种解决方法是更改可访问性以忽略网络颜色。我无权访问源代码，所以我不得不这样做。

【问题讨论】：

标签： css anchor visited

【解决方案1】：

实际上，这与区分大小写无关。这是一项安全功能。 :visited 伪类的功能已在许多现代浏览器（Fx4、IE9、Chrome）中受到限制，以防止 CSS 漏洞：阅读它here。

如今，这些浏览器中的getComputedStyle() 通常返回访问链接的值，就好像它们没有被访问一样。但是，我可以简单地想象规避这一点：将font-weight 用于访问的链接，元素的宽度会发生变化，因此允许将font-weight 更改为:visited 链接的浏览器实际上并不能修复安全漏洞。

您可以看到有some specific things 浏览器可以防止这种情况发生：

window.getComputedStyle 方法和类似的函数（例如 element.querySelector）将始终返回指示用户从未访问过页面上的任何链接的值。

如果您使用同级选择器，例如 :visited + span，则相邻元素（本示例中为 span）的样式将与未访问链接一样。

在极少数情况下，如果您使用嵌套链接元素并且匹配的元素与正在测试历史记录中存在的链接不同，则该元素也将呈现为好像该链接未被访问一样。李>

因此，没有解决此问题的方法。

【讨论】：

解决方法是更改可访问性以忽略 Web 颜色。我无权访问源代码，所以我不得不这样做。

【解决方案2】：

与:visited 一起使用的一个有用属性是background-color。所以试试：

:visited {background-color:red;}

:visited 也适用于非a 元素。

【讨论】：

【解决方案3】：

问题与历史嗅探有关，由于隐私问题，已访问链接禁用更改 css 属性。

我想出了以下解决方法来达到预期的效果。可以更改访问链接的背景颜色。

解决方法很简单：

在链接上设置与链接高度相同的背景图像和 1px 宽度并水平重复图像
图片与链接背景颜色相同
使该图像的一个像素在垂直中间透明
on :visited 状态只需将该链接的背景颜色更改为链接的文本颜色
只有一行背景颜色可见，因为背景图像遮住了它

这是一个例子：

a:link {
    color:#000;
    background:#FFF url('../img/linethrough.png') repeat-x top left;
}

a:visited {
    background-color:#000;
    color:#000;
}

【讨论】：

【解决方案4】：

CSS 本身不区分大小写，但如果使用此样式的 HTML 文件具有 XML 声明和 XHTML doctype，则该 CSS 将不起作用，因为标签区分大小写。您必须将“a”标签设置为小写。

这里解释： http://reference.sitepoint.com/css/casesensitivity

【讨论】：

将文档转换为 XHTML 的唯一方法是 MIME 类型，而不是 doctype 或 XML 声明。
@duri 如果是这样，那么他的服务器可能正在使用 application/xhtml+xml 提供 HTML 文件。
这不正确，或者问题的原因。

【解决方案5】：

也许尝试更改颜色属性，看看是否有效果。

要进行故障排除，您可能需要尝试使用 chrome 中的开发人员工具来查看应用了哪种样式。

【讨论】：

我放了红色，它确实改变了它。但字体粗细没有。谢谢。
这似乎更像是一个评论而不是一个答案。

【解决方案6】：

您需要为 a:link、a:visited、a:active 等单独声明。

删除第一个不包含冒号的样式。它是压倒一切的。替换为：链接。

【讨论】：

这不是这里的问题。