今天在学习用背景图设计项目符号的时候，发现了在 a:visited 伪类选择器里对设置的下划线(text-decoration:underline)和背景图(background:)都不起作用，仅仅对颜色（color）属性有效，很是纠结。
------------------------------------------------------------------------------------
更新于2017/9/24。有关a:visited 有关伪类选择器的color 属性补充。
再做网页小导航条的时候无意间发现了，这个问题在不同浏览器的区别，于是前来于此做一下笔记，一遍日后参考，话不多说，就拿我今天写的导航条为例吧具体如下（完整的代码我就不写了，只把有关此内容的核心代码贴出来吧）：
.test a:link { color:#666;/*我们把这个颜色称为 浅灰 吧*/
text-decoration:none;
} .test a:visited { color:#f00;/*我们把这个颜色称为 橘红 吧*/
text-decoration:underline;/*下划线肯定是无效的*/
}IE浏览器中的效果图（我只点击了-博客-这个链接）：
IE中浏览器中访问其中之一后的超链接的效果.png
很明显上面的代码得到了，点击-博客-后，字体颜色如愿以偿的 由 浅灰 变为 橘红 ，很好的体现在IE浏览器中。
我们再来看一下在 谷歌和火狐 浏览器中的效果：
谷歌、火狐浏览器中超链接的效果.png
谷歌、火狐浏览器中访问其中之一后的超链接的效果.png
在 谷歌和火狐 浏览器中，点击-博客-后，所有超链接的字体颜色都的 由 浅灰 变为 橘红 ，不难想象这也是出于网络安全的考虑（不懂，请继续往下看。），我们在实际应用中记住这些差异即可（其他浏览器为测试，建议阅读者可自行测试）。
------------------------------------------------------------------------------------
代码：
<!doctype html><html><head><meta charset="utf-8"><title>使用背景图设计项目符号</title><style type="text/css">
ul{ list-style:none; width:20em; padding:0; border-bottom:1px dashed #aaa;
} li{ border-top:1px dashed #aaa; margin:0; padding:0.5em;
} li a{ display:block; padding-left:1.5em; text-decoration:none;
} li a:link{ background:url(images/arrow3.gif) no-repeat center right;
} li a:visited{ text-decoration:underline; background:url(images/arrow4.gif) no-repeat center right;
} li a:hover{ background:url(images/arrow4.gif) no-repeat center left;
}
</style></head><body><h1>新闻</h1><ul>
<li><a href="#">军事</a></li>
<li><a href="#">财经</a></li>
<li><a href="#">体育</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">科技</a></li></ul></body></html>ie、谷歌等浏览器效果：
未访问效果.png
鼠标经过效果.png
访问后效果.png
可以看出访问后的并没有出现下划线和背景图。经查阅资料终于解决了我的疑惑。
资料：
Why the :visited Pseudo-class is Strange
Modern browsers have severely restrained the CSS properties that developers can use in a style rule that uses the :visited link pseudo-class. If you’re unfamiliar with this oddball pseudo-class, you may be wondering why your site’s visited links aren’t rendering as expected.
If you try to style visited links by giving them a background-image, for instance, you’ll be surprised that you can no longer do so in modern browsers. You might think it’s a browser bug because there’s no immediately obvious reason why the following CSS doesn’t work:
/* this will not work as expected */
a:visited {
display: block;
background-image: url("cat.jpg");
}
If we use any other pseudo-class — like, say, the :hover pseudo-class — the style properties work as expected.
/* this is perfectly fine */
a:hover {
display: block;
background-image: url("cat.jpg");
}
Currently, it seems like the only property you can assign to the :visited pseudo-class is the color property. Oh, and the browser in all likelihood won’t render the color with an alpha transparency even if you correctly specify it with a standard color unit like rgba.
Strange right? What’s up?
The W3C specifications for the link pseudo-classes technically gives web browsers the option to ignore our :link and :visited pseudo-class style rules. This is because the :visited pseudo-class can be potentially abused in such a way that an abuser can get data about its visitors’ browsing history.
It is possible for style sheet authors to abuse the :link and :visited pseudo-classes to determine which sites a user has visited without the user’s consent.
UAs may therefore treat all links as unvisited links, or implement other measures to preserve the user’s privacy while rendering visited and unvisited links differently."
Source: Selectors Level 3: The link pseudo-classes: :link and :visited
(In case you’re wondering: In the above excerpt, the term "UAs" refers to "user agents", which is software that’s used to access a website. The most common type of UA is a web browser.)
How a User’s Browsing History Could Be Compromised
To explain the reason why you can’t use all CSS properties with the :visited pseudo-class, I will attempt to explain it through a hypothetical situation.
Modern browsers no longer allow the background-image property to render.
省略......
翻译（英语不好实在看不下去了，只翻译了上面这部分）：
为什么：访问伪类是奇怪的？
现代浏览器严重限制了开发人员可以在样式规则中使用的CSS属性，该样式规则使用：访问链接伪类。如果你不熟悉这个古怪的伪类，你可能想知道为什么你的网站的访问过的链接没有呈现预期。
如果你试着通过给他们一个背景图像来设计访问的链接，你会惊讶于你不再能在现代浏览器中这样做了。你可能认为这是一个浏览器错误，因为没有明显的理由说明下面的CSS不起作用：
/ *这将不象预期的那样工作。*/
a:visited {
display: block;
background-image: url("cat.jpg");
}如果我们使用其他任何伪类，比如：悬停伪类，样式属性就如预期的那样工作。
/*这是完全正确的*/。a:hover { display: block; background-image: url("cat.jpg");
}目前，它似乎是惟一可以赋予的属性：访问的伪类是颜色属性。哦，在所有可能的浏览器不会呈现颜色的alpha透明度即使你正确地指定它与标准颜色单元如RGBA。
陌生吗？出什么事了？
W3C规范的链接伪类在技术上提供了Web浏览器忽略我们的选项:link 和 :visited伪类样式规则。这是因为：:visited伪类可以潜在的滥用使得网络施虐者可以获得访问者的浏览历史记录的数据。
样式表作者可能会滥用：链接和访问的伪类，以确定用户在未经用户同意的情况下访问了哪些站点。
浏览器可能会把所有链接中未访问的链接，或采取其他措施来保护用户的隐私而渲染访问和未访问的链接是不同的。”
用户的浏览历史如何被破坏
为了解释为什么不能将所有CSS属性用于:visited，我将尝试通过假设的情况来解释它。
现代浏览器不再允许背景图像属性渲染。
总结：
a:visited伪类可能会暴露用户浏览信息记录，攻击者可能会据此判断用户曾经访问过的网站，造成不必要的损失，因此这些浏览器决定限制a:visited的功能，所以不是代码的问题，而是浏览器方面的限制。
所以，若是用下划线或背景图来判断某链接是否曾被点击过是失效的，那么我们就只能通过设置颜色来区别了，这时候我们就要严格遵从lvha规则了（但在写小demo学习时又会发现有时候页面在经过改动后刷新会自动显示链接的颜色为：visited设置中的颜色，这是因为浏览器缓存的原因，在做小demo时可采用头部meta编码使其不再保留缓存）。
附：但书写时也要注意link--visited--hover-active顺序不能颠倒。
老外总结了一个便于记忆的“爱恨原则”（LoVe/HAte），即四种伪类的首字母:LVHA。定义ａ链接样式的正确顺序：a:link、a:visited、a:hover、a:active。
作者：暗恋桃花源丫
链接：https://www.jianshu.com/p/a4719ee636e5
共同学习，写下你的评论
评论加载中...
作者其他优质文章
