将访问的链接颜色设置为未访问的链接的颜色（P.S.不是通常的问题）答案

【问题标题】：Set visited link color to whatever the color of un-visited link is (P.S. not the usual question)将访问的链接颜色设置为未访问的链接的颜色（P.S.不是通常的问题）
【发布时间】：2010-12-28 03:04:20
【问题描述】：

我需要将 a:visited CSS 设置为任何正常 a 设置为的颜色。

我希望能够告诉浏览器的是，对于访问过的链接，使用与未访问过的链接相同的颜色，无论它是什么颜色。

我需要这样做不指定特定颜色。

例如，如果出现了一些奇怪的浏览器，它使用“绿色”作为正常未访问链接的颜色，则此 CSS 应该指示浏览器对已访问链接使用相同的绿色。浏览器使用的确切颜色应该对我的代码是透明的.. 因此使用“无论颜色”这一短语。

附：我知道如何将 a:visited 和 a 设置为特定颜色。这不是我要问的。

附言如果必须，我愿意使用 JavaScript。但我真的很想让浏览器做到这一点。

我为什么要做你问的那样的事情？

IE8 用于链接的蓝色有点酷。它不是#0000FF。这是一个很好的蓝色阴影。所以我想为已访问和未访问的链接设置它。但我不应该每次都截取屏幕截图或使用一些插件来选择确切的十六进制值。如果 IE 稍后将颜色更改为其他令人敬畏的阴影，则此代码应该可以正常工作。我不想再次找到十六进制并在我的代码中更改它。

这只是原因之一。不要给我那个蓝色的十六进制。找出答案很容易，但这不是答案！

【问题讨论】：

你为什么要破坏浏览器的导航工具之一！？
叫我疯了：P
这是我一段时间以来一直想做的事情之一，但这次我在设计一个新网站时确实引起了我的注意。我只是想——这么简单的事情不可能吗？！
不是不可能...如果是为了外观，您能找到一种令人赏心悦目的颜色并与配色方案相得益彰吗？
在现实世界中，我可以只使用适合网站主题的颜色并与之相处。但我只想知道我是否可以告诉浏览器做这样的事情。请检查我的问题的编辑。我添加了一个示例。

标签： html css anchor visited

【解决方案1】：

a:link{color:inherit}
a:active{color:inherit}
a:visited{color:inherit}
a:hover{color:inherit}

是的。

我需要这个，因为一些文本链接（而不是图像链接）是我项目主菜单的主要部分，所以我想要它们是我的颜色，而不是浏览器颜色！

每个链接都包含在一个 p 标签组中，该标签组的类在 CSS 中设置了特定的颜色（我的颜色）。

【讨论】：

继承意味着：“从父元素获取链接的颜色”，因此对于大多数人来说，您的建议将使链接颜色为黑色。它不适用于页面正文中的链接，所以我会说这不是一个好的答案，甚至我会说这不是问题所在。
-1，不回答问题。正如上面 Arsen7 所提到的，链接从父元素继承黑色。

【解决方案2】：

Danny Robers script 在 Firefox 和 Chrome 中为我工作（不确定 IE）。

FWIW，特殊值 HyperlinkText 本来是做你想做的事情的“标准”方式，但它在 2003 年春天的某个时候从 CSS3 中删除了。

看起来 Firefox 是唯一开始实现它的浏览器，因为以下内容适用于 Firefox：

a:visited { 颜色: -moz-hyperlinktext; }

【讨论】：

【解决方案3】：

我认为没有纯 CSS 解决方案。通常你会选择一种颜色，并设置 a:link 和 a:visited 相同的颜色。

我试过 {color: inherit} 但没用。

不过，这个 jQuery 解决方案效果很好。

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
            type="text/javascript"></script>
        <script type="text/javascript">
            $(function(){
                var normalColor = $('a:link').css('color');
                $('a:visited').css('color', normalColor);
            });
        </script>
    </head>
    <body>
        <a href="http://www.google.com">Google</a>
        <a href="nowhereyouvebeen">No where you've been</a>
    </body>
</html>

【讨论】：

我试过了。但它不起作用。我仍然看到紫色的访问链接。我只是使用您发布的代码并检查以确保包含 jQuery 并且正确调用了该函数。我什至提醒了normalColor，它的值是正确的。但最后一行似乎没有任何效果。我错过了什么吗？
可能是最好的解决方案 - 我很惊讶地发现链接颜色不是 CSS2 系统调色板的一部分：codehouse.com/webmaster_tools/system_color_palette - 但无论如何它们在 CSS3 中已被弃用
我认为这行不通，因为 jQuery 不能应用这样的伪类。它返回正确的“正常”颜色，但有趣的是，$('a:visited') 似乎也返回了未访问的颜色。设置它是另一回事，尽管我认为这可以通过一些疯狂的科学来完成，即直接从 JavaScript 编写新的 CSS 样式表以将规则应用于伪类。
@anon355079：我采纳了@DannyRoberts 的想法并改变了a:visited 在单独但相关的答案中的设置方式。

【解决方案4】：

使用 CSS 无法做到这一点。浏览器根据仅它知道的数据库条目指示已访问链接，然后使用特定浏览器配置中指定的默认颜色。

CSS 物理上无法获取页面上某些内容的颜色。就是这样。唯一的方法是像 Danny Roberts 的回答那样使用 javascript。

我认为他的回答不能正常工作的原因是$('a:visited') 只是选择了当时所有访问过的链接，然后更改了它们的颜色。

您需要做的是观察点击事件并每次重新运行代码：

var normalColor = $('a:link').css('color');
$('a').click(function() {
    $('a:visited').css('color', normalColor);
});

【讨论】：

关闭——但不完全。在 JavaScript 中，我们实际上可以将适当的伪类规则直接写入样式表。

【解决方案5】：

我认为没有一种纯 CSS 方法可以实现这一点。我认为您需要使用 JavaScript 来获取 a 的颜色，然后将 a:visited 设置为该颜色，这可能不适用于所有浏览器，除非指定了 a{color:#dea}。

【讨论】：

完全正确。我尝试为 a 获取内置颜色。我只有空字符串。因为正如您正确指出的那样，应该设置它。如果必须，我可以使用 JavaScript。但是你所说的这种特殊方式是行不通的。
如果元素确实设置了样式属性，您只会从元素的样式属性中获取颜色。这类似于 width 和 height 属性，除非设置它们，否则您无法获取它们。但是，dom对象也有scrollHeight和scrollWidth以及clientHeight和clientWidth，但是我怀疑是否有clientColor...或scrollColor，这没有任何意义...

【解决方案6】：

Presto：

$(function(){
  var sheet = document.styleSheets[document.styleSheets.length-1];
  sheet.insertRule(
    'a:visited { color:'+$('a:link').css('color')+'; }',
    sheet.length
   );
});

我已经测试并且可以确认这在 Chrome 中有效。但是请记住，您要向哪个sheet 添加规则 - 确保其 media 属性 适用于您关心的媒体。此外，如果您有任何覆盖 a 着色的规则，这可能无法正常工作 - 因此请确保您的样式表中没有这些。

我不太确定这是一个非常明智的做法。就个人而言，我总是为每个站点明确定义我的链接颜色。

PS：

显然 IE（不知道是哪个版本）坚持自己的语法：

sheet.addRule('a:visited', $('a:link').css('color'), -1);

【讨论】：

只为你，@paqogomez ;)
是 $('a:link').css(;color') jquery 还是样式表规则语法？即是否需要 jquery，因为它看起来像 jquery？
恐怕确实是 jQuery。虽然现在回想起来，但我想知道设置 :visited 元素 color: inherit; 是否就足够了。
发表评论后，我在这里提供了自己的答案。

【解决方案7】：

没关系。有关与提问者问题更具体相关的内容，请参阅我的其他答案。

我这样做：

a, a:visited { color:#4CA1F6; }
a:hover      { color:#4CB6E1; } a:active  { color:#0055AA; }

现在这个帖子让我思考，并且我对我的方法进行了以下改进：

a:link, a:visited { color:#4CA1F6; }
a:hover, a:focus  { color:#4CB6E1; } 
a:active          { color:#0055AA; }

【讨论】：

如果您将答案放在问题的上下文中，这将更有价值。
@paqogomez：我想，我的意思是提问者提出的问题意味着他们以错误的方式开始处理错误的问题。你应该没有理由不能同时定义a, a:visited。
另外，既然这个线程让我思考，我认为同时定义a:hover, a:focus 也很好，这样键盘访问会产生与:hover 相同的状态。另外，经过进一步考虑，我开始怀疑我是否应该定义a:link 而不仅仅是a...可能。
澄清一下：我知道提问者要求的是不同的东西——我很好，不要接受我的回答。然而，我也明白，像我这样的人会偶然发现这个线程来寻找我提供的答案，因为许多人会想到一个与提问者相关但不同的问题。
好的，好的。 好的。我将真实地回答这个问题。查看其他答案。

【解决方案8】：

我需要一个解决方案，因为这个问题的标题建议“将访问的链接颜色设置为未访问链接的颜色”。对我来说，我需要一种方法来对用于回归测试的浏览器页面内容屏幕抓取进行图像比较（pdiff - 感知差异）。这是对我有用的代码。

(function(){
  var links = document.querySelectorAll('a');
  for (var i=0; i<links.length; i++) {
    var link = links[i];
    if (link.href) { //must be visitable
      var rules = window.getMatchedCSSRules(link) || [];
      var color = '#0000EE' //most browsers default a:link color;
      for (var j=0; j<rules.length; j++) {
        var rule = rules[j];
        var selector = rule.selectorText;
        color = rule.style['color'] || color;
      }
      link.setAttribute('style','color:' + color + ' !important');
      //this was enough for me but you could add a 'a:visited' style rule to the rule set
    }
  }
})();

【讨论】：

【解决方案9】：

 a:link, a:visited {color: inherit;}
 a:hover, a:focus {color:inherit;}

【讨论】：

OP 声明“没有指定特定颜色”
对于那些想知道的人，这个答案是在之前的评论（可能还有投票）之后编辑的：stackoverflow.com/posts/19509026/revisions

【解决方案10】：

a.one:link {
    color:#996600;
    background-color:transparent; 
    text-decoration:underline;  
}

a.one:hover { 
    color: red;
    background-color: transparent;
    text-decoration: underline; 
}

a.one:visited {
    color: #996600;
    background-color: transparent;
    text-decoration: underline
}

a.one:hover { 
    color: red;
    background-color: transparent;
    text-decoration: underline; 
}

【讨论】：

欢迎来到 StackOverflow。你能解释一下你的答案吗？由于这是一个老问题，它与已经发布的许多其他答案有何不同？