CSS :visited伪类选择器隐秘往事回忆录

昨天想使用a:visited改变右侧“猜你喜欢”已访问过的文字颜色，发现改来改去效果都一般，想到还有其他几个CSS可以设置，与颜色相关的，结果，太久没使用这个伪类选择器，具体那几个支持的CSS一下子记不得了，发现有必要自己整理记录下。

一、由爱生恨

链接4伪类（后两个伪类后来拖拽到几乎所有HTML标签元素）如果同时使用，其顺序是这样的：:link → :visITed → :hover → :active。

首字母连起来是LVHA，顺序完全符合love-hate，也就是爱恨，所谓由爱生恨，这样顺序就记住了。

目前这个年代，:link这个伪类用得已经不多了，但作用还是有的，我们平时用得比较多的都是直接设置a> 元素的颜色，例如：

a {
     color: blue;
 }

实际上，下面这种要更合适，更规范：

a:link {
     color: blue;
 }
    

两者有什么区别呢？

区别在下面，下面两个a> 元素，前者可以匹配a:link选择器，但后者却只能匹配a选择器：

a href="##">
    文字/a>
     a>
    文字2/a>
    

例如我很喜欢移除href属性表示a> 元素按钮的禁用态，使用a:link禁用和非禁用的CSS就更好控制了。

只是我们使用a:link选择器的时候，a:visited选择器也一定要设置（因为a:link在最前面），不然访问过的链接颜色就会跟着系统或者当前元素设置的color走，表现反而有些乱，因此，当下已经很少见到使用:link伪类选择器的了。

而:visited伪类选择器依然很有用，尤其在列表式链接站点，例如文章列表，章节列表，可以让用户知道这篇文章我已经看过了，算是比较友好的一种体验处理。

二、:visited伪类选择器支持CSS很有限

或许是出于安全考虑，:visited伪类选择器支持CSS很有限，目前仅支持下面这些CSS：color，background-color，border-color，border-bottom-color，border-left-color，border-right-color，border-top-color，column-rule-color以及outline-color。

同时，类似::before，::after这些伪元素都不支持，例如，我们希望使用文字标示已经访问过的链接，如下：

a:visited::after{
    content:'visited';
}
  // 注意，不支持

不好意思，想法虽好，但没有任何浏览器支持，请死了这条心。

不过好在:visited伪类支持子选择器，不过，所能控制的CSS属性和:visited一模一样，就那几个和颜色相关的CSS属性，也不支持::before，::after这些伪元素。

例如：

a:visited span{
    color: red;
}
    

a href="">
    文字span>
    visited/span>
    /a>
    

如果链接是浏览器访问过的，则span> 元素文字颜色就会直红色，如下截图示意：

于是，我们就可以下面这种方法实现访问过的链接文字后面跟一个visited字样。HTML如下：

a href="">
    文字small>
    /small>
    /a>

CSS如下：

small {
     position: absolute;
     color: white;
 }
 // 这里设置color: transparent无效 small::after {
     content: 'visited';
 }
 a:visited small {
     color: purple;
 }

除了支持的CSS有限，:visited伪类选择器还有不少其他奇怪的特性。

三、没有半透明

使用:visited伪类选择器控制颜色的时候，虽然语法上支持半透明色，但是表现上，要么纯色，要么全透明。

例如：

a {
     color: blue;
 }
 a:visited {
     color: rgba(255,0,0,.5);
 }
    

结果不是半透明红色，而是纯红色，完全不透明。

四、只能重置，不能凭空设置

请问下面这段CSS，访问过的a> 元素会有背景色吗？

a {
     color: blue;
 }
 a:visited {
     color: red;
     background-color: gray;
 }
    

HTML为：

a href="">
    有背景色吗？/a>

答案是不会有背景色，如下截图：

因为:visited伪类选择器中的色值只能重置，不能凭空设置。

我们修改成下面这样就可以了：

a {
     color: blue;
     background-color: white;
 }
 a:visited {
     color: red;
     background-color: gray;
 }

此时，文字效果如下截图：

也就是默认需要有一个背景色，这样:visited的时候才有有背景色呈现

五、:visited设置并呈现的色值无法获取

也就是说，当文字颜色值表现为:visited选择器设置的颜色值的时候，我们使用JS的getComputedStyle()是获取不到这个颜色值的。

已知CSS如下：

a {
     color: blue;
 }
 a:visited {
     color: red;
 }
    

并且我们的链接表现为红色，此时我们运行下面的JavaScript代码：

window.getComputedStyle(document.links[0]).color;
    

结果输出的是："rgb(0, 0, 255)"，也就是蓝色blue对应的RGB色值。

如下截图示意：

六、回忆完毕

总之，:visited伪类选择器是一个有很多“怪癖”的选择器，如果按照:hover或者:active这类选择器的表现理解之，一定会不知所然，因为太多特性不支持，太多表现不合常规理解。

究其原因，我猜100%是出于安全考虑，如果浏览器可以通过JS或者其他行为表现知道你已经访问过哪些链接，我靠，那隐私直接就暴露了呀，肯定是不行的，所以，如果你想借助:visited伪类选择器搞些花头，我劝大家还是死了这条心，老老实实搬砖吧。

另外，:visited的怪异特性应该还有其他一些，欢迎大家进行补充。

感谢阅读！

（本篇完）

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！