Question

a链接的伪类选择器杂谈

Answer 1

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

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

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

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

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

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

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

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

点击链接前：

点击链接后：

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

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

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