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 选择器：

例如我很喜欢移除 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';}  // 注意，不支持

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