浅析a标签的4个伪类 .

 关于伪类，你们最熟悉的仍是a标签的4个伪类：
:link        有连接属性时
:visited    连接地址已被访问过
:active     被用户激活(在鼠标点击与释放之间发生的事件)
:hover      其鼠标悬停

关于这四个伪类的排列次序，不少地方都能查到，但是为何这么排列？历来没有见过有人说起。这里我就从技术、用户体验、优先级几个角度简单的阐述下咱们为何这么排列。

首先从技术层面上，

a的这四个伪类，分别表示了a的四种状态，要注意的是，a能够只具备一种状态（:link），或者同时具备2种或者三种状态！好比说，任何一个有HREF属性的a标签，在未有任何操做时都已经具有了:link的条件，也就是知足了有连接属性这个条件；若是访问过的a标签，同时会具有 :link :visited 两种状态。把鼠标移到访问过的a标签上的时候，a标签就同时具有了 :link :visited :hover三种状态。

其次从用户体验的角度，

在用户使用超连接的时候，为了最佳的用户体验，要作到下面几点：

第一：无论是不是被访问过的超连接，只要我鼠标移上的时候(:hover)都要有写变化，好比变色、加下划线等等，告诉用户选中的是能够点击的超连接。

第二:无论是否访问过，在a标签被激活时（:active），都应该有相同的样式变化。也就是说，同一个a标签，未访问过期在被用户激活和被访问时再被用户激活时要有相同的样式。这个也很好理解，用户点下同一个超连接时的效果不该该有差异。

第三:访问过的a标签可能要跟没有访问过的a相区分。

从CSS优先级角度，

前面的文章讲过具体的css优先级，这里我要说的是对于同一优先级的相冲突样式，浏览器的选择问题。好比：
.test {color:red; color:green;}
或者：
.test {color:red;}
.test {color:green;}
上面两个例子中，你们都知道，对于这个.test指向的内容，浏览器会显示后一个属性设置。也就是color:green.

说到这里，不少人可能已经有头绪了。结合上面的三点，不难分析咱们为何要这么排。

第一：无论什么状况下鼠标悬停都应该有一个样式变化（:hover）,咱们就把hover放在最后，防止具有其余状态时，被其余状态的设置覆盖掉。
第二：当a被激活时(:active)，咱们要求无论是否访问过，都应该有相同的样式，也就是这个状态的效果应该可以覆盖未被访问时(:link)与 已访问过(:visited)两种状态。应该放在 :link :hover的后面。
第三：被访问过的a（:visited）可能会有不同的样式属性，用来区别a是否被访问过。也就是说:visited 状态的属性能够覆盖掉:link状态的属性， 即 :visited 要放在 :link 的后面。
今天下午的时候，个人助教联系我问“a的四个伪类是否是 L V H A啊？而不是你讲的L V A H。新浪什么的都是这样的。我是从书上看的 love and hate。“ 

看到这个问题，咱们不妨来看下H 和A 的关系。hover 和 active 分别表示鼠标悬浮在 a标签上 和鼠标点下没有弹起的时候。不难发现，这两种状态是不会并存的，也不会存在谁要覆盖谁的问题。因此，无论是LVHA仍是LVAH ，他们的效果都是同样的。

不过用LOVE AND HATE 的方式来记住这个排序是一种不错的方法，推荐新手使用。