Html 将访问的链接颜色设置为未访问链接的颜色（PS 不是通常的问题）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1929618/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set visited link color to whatever the color of un-visited link is (P.S. not the usual question)
提问by
I need to set the a:visited CSS to whatevercolor the normal a is set to.
我需要将 a:visited CSS设置为正常 a 设置的任何颜色。
What I want to be able to tell the browser is, for the visited links, use the same color as the unvisited links, whatever color it is.
我希望能够告诉浏览器的是，对于访问过的链接，使用与未访问过的链接相同的颜色，无论它是什么颜色。
I need to do this without specifying a particular color.
我需要在不指定特定颜色的情况下执行此操作。
Like, if some weird browser comes along that uses "green" as the color for normal unvisited links, this CSS should instruct the browser to use that same green for visited links. Exactly what color is used by the browser should be transparent to my code.. hence the phrase "whatever color".
就像，如果某个奇怪的浏览器出现使用“绿色”作为正常未访问链接的颜色，则此 CSS 应指示浏览器对已访问链接使用相同的绿色。浏览器使用的确切颜色应该对我的代码透明..因此短语“任何颜色”。
P.S. I know how to set a:visited and a to a particular color. That is not what I am asking.
PS 我知道如何将 a:visited 和 a 设置为特定颜色。这不是我要问的。
P.P.S. I am willing to use JavaScript if I have to. But I am really hellbent on making the browser do this.
PPS 如果需要，我愿意使用 JavaScript。但我真的很想让浏览器做到这一点。
Why would I want to do something like that you ask?
为什么我想做你问的那样的事情？
The blue color that IE8 uses for links is kind of cool. It is not #0000FF. It is a nice shade of blue. So I want to set it for both visited and unvisited links. But I shouldnt take a screenshot or use some add-on to pick the exact hex value each time. If IE later changes the color to some other awesome shade, this code should just work. I don't want to again find the hex and change it all over my code.
IE8 用于链接的蓝色有点酷。它不是#0000FF。这是一种很好的蓝色阴影。所以我想为访问过和未访问过的链接设置它。但是我不应该每次都截取屏幕截图或使用一些附加组件来选择确切的十六进制值。如果 IE 稍后将颜色更改为其他一些很棒的阴影，则此代码应该可以正常工作。我不想再次找到十六进制并在我的代码中更改它。
This is just one reason. Don't give me the hex for that blue. Finding that out is easy but that wouldn't be the answer!
这只是一个原因。不要给我那个蓝色的十六进制。找出答案很容易，但这不是答案！
回答by Fintan
a:link{color:inherit}
a:active{color:inherit}
a:visited{color:inherit}
a:hover{color:inherit}
Hell yes.
当然好。
I needed this because some text links (as opposed to image links) were a major part of my project's main menu, so I want them MY colours, not browser colours!
我需要这个是因为一些文本链接（而不是图像链接）是我项目主菜单的主要部分，所以我希望它们是我的颜色，而不是浏览器的颜色！
Each link was enclosed in a p tag group whose class had a particular colour (MY colour) set in CSS.
每个链接都包含在 ap 标签组中，其类在 CSS 中设置了特定颜色（我的颜色）。
回答by Dean Brettle
Danny Robers scriptworks for me in Firefox and Chrome (not sure about IE).
Danny Robers 脚本在 Firefox 和 Chrome 中适用于我（不确定 IE）。
FWIW, the special value HyperlinkTextwould have been the "standard" way to do what you want, but it was dropped from CSS3 sometime in spring 2003.
FWIW，特殊值HyperlinkText本来是做你想做的事情的“标准”方式，但它在 2003 年春天的某个时候从 CSS3 中删除了。
It looks like Firefox is the only browser that started implementing it, because the following works for Firefox:
看起来 Firefox 是唯一开始实现它的浏览器，因为以下内容适用于 Firefox：
a:visited { color: -moz-hyperlinktext; }
一个：访问{颜色：-moz-超链接文本；}
回答by Marcus Whybrow
There is no way to do this using CSS. The browser indicates that a link has been visited based upon a database entry only it knows about, and then uses default colours specified in the specific browsers configuration.
使用 CSS 无法做到这一点。浏览器根据一个只有它知道的数据库条目来指示某个链接已被访问过，然后使用特定浏览器配置中指定的默认颜色。
CSS physically just cannot obtain the colour of something on the page. That is just the way it is. The only way is to use javascript like Danny Roberts' answer.
CSS 在物理上无法获取页面上某些内容的颜色。就是这样。唯一的方法是像 Danny Roberts 的回答一样使用 javascript。
The reason I think that his answer is not working correctly is that $('a:visited')just selects all the visited links at that point in time and then the colour is changed for them.
我认为他的回答没有正确工作的原因是，$('a:visited')只是选择了当时所有访问过的链接，然后为它们更改了颜色。
What you need to do is watch for click events and re run the code each time:
您需要做的是观察点击事件并每次重新运行代码：
var normalColor = $('a:link').css('color');
$('a').click(function() {
$('a:visited').css('color', normalColor);
});
回答by Danny Roberts
I don't think there's a pure CSS solution. Usually you would pick a color, and set both a:link and a:visited that same color.
我认为没有纯粹的 CSS 解决方案。通常你会选择一种颜色，并将 a:link 和 a:visited 设置为相同的颜色。
I tried {color: inherit} but that was useless.
我试过 {color: inherit} 但这没用。
This jQuery solution works great though.
不过，这个 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>
回答by easement
I don't think there is a pure CSS way of achieving this. I think you would need to use JavaScript to get the color of the a and then set a:visited to that color and this probably wouldn't work in all browsers unless there was an a{color:#dea} specified.
我不认为有一种纯粹的 CSS 方式来实现这一点。我认为您需要使用 JavaScript 来获取 a 的颜色，然后将 a:visited 设置为该颜色，除非指定了 a{color:#dea}，否则这可能不适用于所有浏览器。
回答by ChaseMoskal
Nevermind this. See my other answer for something more specifically relevant to the asker's question.
别管这个。有关与提问者问题更具体相关的内容，请参阅我的其他答案。
I do this:
我这样做：
a, a:visited { color:#4CA1F6; }
a:hover { color:#4CB6E1; } a:active { color:#0055AA; }
Now that this thread has me thinking though,and I've made the following improvements to my method:
现在这个线程让我思考，我对我的方法进行了以下改进：
a:link, a:visited { color:#4CA1F6; }
a:hover, a:focus { color:#4CB6E1; }
a:active { color:#0055AA; }
回答by ChaseMoskal
Presto:
急速：
$(function(){
var sheet = document.styleSheets[document.styleSheets.length-1];
sheet.insertRule(
'a:visited { color:'+$('a:link').css('color')+'; }',
sheet.length
);
});
I've tested and can confirm this works in Chrome. Keep in mind however, which sheetyou're adding the rules to -- make sure its media attributeapplies to the media that you care about. Additionally, if you have any rules that override the acoloring, this likely won't work properly -- so make sure your stylesheets are clear of that.
我已经测试过并且可以确认这在 Chrome 中有效。但是请记住，sheet您要向其中添加规则——确保其媒体属性适用于您关心的媒体。此外，如果您有任何覆盖a颜色的规则，这可能无法正常工作——因此请确保您的样式表没有这些。
I'm not so sure this is a very wise practice anyways. Personally, I always explicitly define my link colors for every site.
无论如何，我不太确定这是一个非常明智的做法。就个人而言，我总是为每个站点明确定义我的链接颜色。
PS:
PS：
Apparently IE (don't know which versions) insists on their own syntax:
显然IE（不知道是哪个版本）坚持自己的语法：
sheet.addRule('a:visited', $('a:link').css('color'), -1);
回答by kernowcode
I required a solution to do as the title of this question suggests "Set visited link color to whatever the color of un-visited link is". For me I needed a way to perform an image comparison of browser page content screen grabs that I use for regression testing (pdiff - perceptual diff). Here is the code that worked for me.
我需要一个解决方案，因为这个问题的标题建议“将访问的链接颜色设置为未访问链接的颜色”。对我来说，我需要一种方法来执行用于回归测试的浏览器页面内容屏幕抓取的图像比较（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
}
}
})();
回答by Zahid Khan
a:link, a:visited {color: inherit;}
a:hover, a:focus {color:inherit;}
回答by john northern
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;
}
