Question

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

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

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

就像，如果一些奇怪的浏览器出现使用“绿色”作为正常未访问链接的颜色，这个CSS应该指示浏览器对访问过的链接使用相同的绿色。浏览器使用的颜色究竟应该对我的代码透明。因此短语“无论颜色”。

P.S。我知道如何设置：访问和特定颜色。这不是我要问的。

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

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

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

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

Answer 1

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

见到了。

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

每个链接都包含在一个p标记组中，该标记组的类具有在CSS中设置的特定颜色（MY颜色）。

Answer 2

Danny Robers script适用于Firefox和Chrome（不确定IE）。

FWIW，特殊值HyperlinkText可能是你想要的“标准”方式，但它在2003年春季的某个时候从CSS3中删除了。

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

a：visited {color：-moz-hyperlinktext; }

Answer 3

我认为没有纯CSS解决方案。通常你会选择一种颜色，并设置：链接和：访问相同的颜色。

我试过{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>

Answer 4

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

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

我认为他的答案不正确的原因是$('a:visited')只是选择那个时间点的所有访问过的链接，然后为它们更改颜色。

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

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

Answer 5

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

Answer 6

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

我这样做：

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; }

Answer 7

的的Presto： 的

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

我已经过测试，可以确认这在Chrome中有效。但请注意，sheet您要添加规则 - 确保其 媒体属性 适用于您关注的媒体。此外，如果您有任何覆盖a着色的规则，这可能无法正常工作 - 因此请确保您的样式表清楚。

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

PS：

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

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

Answer 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
    }
  }
})();

Answer 9

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

Answer 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; 
}

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

10 个答案:

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