59

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

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

我需要在不指定特定颜色的情况下执行此操作。

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

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

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

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

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

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

4

10 回答 10

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

当然好。

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

每个链接都包含在 ap 标签组中,其类在 CSS 中设置了特定的颜色(我的颜色)。

于 2011-05-04T22:52:07.973 回答
4

Danny Robers 脚本在 Firefox 和 Chrome 中适用于我(不确定 IE)。

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

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

一:访问{颜色:-moz-hyperlinktext;}

于 2010-07-18T10:10:42.180 回答
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>
于 2010-01-07T04:43:26.303 回答
3

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

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


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

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

var normalColor = $('a:link').css('color');
$('a').click(function() {
    $('a:visited').css('color', normalColor);
});
于 2010-11-17T13:06:50.433 回答
1

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

于 2009-12-18T17:43:17.990 回答
0

快速:

$(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);
于 2013-10-05T16:53:54.197 回答
0

不用管这个。有关与提问者问题更具体相关的内容,请参阅我的其他答案。

我这样做:

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; }
于 2013-10-04T22:17:12.100 回答
0

我需要一个解决方案,因为这个问题的标题建议“将访问的链接颜色设置为未访问链接的颜色”。对我来说,我需要一种方法来对用于回归测试的浏览器页面内容屏幕抓取进行图像比较(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
    }
  }
})();
于 2017-01-03T11:20:49.590 回答
-1
 a:link, a:visited {color: inherit;}
 a:hover, a:focus {color:inherit;}
于 2013-10-22T04:32:45.090 回答
-2
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; 
}
于 2017-05-26T20:38:52.173 回答