a链接的伪类选择器杂谈

:hover{}为什么要在下面？

a连接常用的伪类选择器有四种，根据CSS文档的推荐，这四个选择器最好按如下方式排列：

a:link{color:red}
a:visited{color:green}
a:hover{color:blue}
a:active{color:yellow}

可以记忆为LoVe,HAte（爱恨交织啊！）
原因如下：这四种选择器的权重是一样的，当他们同时满足条件时，下面的会覆盖掉上面的。
按照CSS2推荐的顺序我们来分析一下：初始状态的a连接毫无疑问应用:link{}的样式，当链接被访问后选中:visited{}中的样式，:link{}中的样式失效，我们再次把鼠标移到链接上时触发:hover{}中的样式。注意此时:visited{}中的样式并没有失效，而是因为:hover{}和:visited{}中的样式同时生效，但是:hover{}中的样式在下面，把:visited{}中的样式覆盖掉了。此时，我们按下鼠标同时触发:visited{},:hover{},:actived{},位于最下面的:actived{}就会覆盖上面的两个样式，这正是我们想要的效果。

换一种情况，我们把:hover{}放最上面：

a:hover{color:blue}
a:link{color:red}
a:visited{color:green}
a:active{color:yellow}

由于一个a标签不是:link{}状态，就是:visited{}状态，这两个状态必然有一个是激活的，而他们都位于:hover{}下面，总有一个会覆盖掉:hover{}的，所以:hover{}就失效了。这就是:hover{}为什么要放在:link{}和:visited{}下面的原因。

另一种情况

a:link{color:red;background:pink}
a:visited{color:green}
a:hover{color:blue}
a:active{color:yellow}

a标签初始化为红字、粉背景，当鼠标放在a标签上不点击时，此时字的颜色变成蓝色，任然是粉背景。出现这种情况的原因是：:link{},和:hover{}同时被激活，两者都有color属性，浏览器只能选一个，就选了位于下方的:hover{}中的color:blue，但是只有:link{}中有background所以只能用它的。但是如果:hover{}中也设置了background而且不是粉色，那么浏览器会选择:hover{}中的背景色。

:visited{}潜规则

a:link{color:red;}
a:visited{color:green;background:pink}
a:hover{color:blue}
a:active{color:yellow}

这一次我们把实验对象换成:visited{}。我们惊奇的发现，当我们点击链接触发:visited{}选择器，链接只有颜色变成了绿色，背景色并没有任何改变。这个问题需要引起注意。
于是排除干扰因素，我们只留下:visited{}，再实验：

a:visited{color:green;background:pink}

Paste_Image.png

开发者工具中背景色是生效的，可是页面显示结果就是没有背景色。

迫不得已，召唤方方大神。大神果然是大神，瞬间搞定了。

a{backgound:#fff}
a:visited{color:green;background:pink}

点击链接前：

Paste_Image.png

点击链接后：

Paste_Image.png

故事并没有结束，当我想测试这种方法对其它属性是否有效时：

a{backgound:#fff;font-size:30px;}
a:visited{color:green;background:pink;font-size:50px;}

然而，无效。 但是其它3个伪类选择器并没有发现此现象。
该现象原因不清楚，有待进一步考证……

MDN上对于visited的解释

Paste_Image.png

翻译如下（自己翻译的，有错误还请指正）：
注意：出于隐私原因，浏览器严格的限制应用于:visited伪类选择器中的样式：只有color,background-color,border-color,border-bottom-color, border-left-color, border-right-color, border-top-color, outline-color, column-rule-color以及填色和描边可用。同时也要注意，透明度属性也会被忽视：取而代之的是没有被访问时元素的透明度值（除非透明度是0，这种情况下颜色会被忽视，还是会用未被访问状态的颜色）。
虽然color属性是可以改变的，但是getComputedStyle方法仍然会说谎，并返回没有被访问时的颜色值。
更多的关于:visited选择器的限制以及目的的信息请看隐私和:visited选择器

这么一看，恍然大悟了，原来人家是出于隐私考虑，故意限制了visited可以使用的样式。具体为什么限制了样式后会保护隐私，那就只能看它的推荐文章了。

总结

1. :hover{}选择器要放在:link和:visited的下面才能生效；
2. 权重相同的选择器，出现在样式表下面的会覆盖掉上面的的样式，前提是它们都作用到同一个元素的同一种属性；
3. 出于隐私问题，:visited{}选择器只能使用部分和颜色有关的样式。