<a>链接四个伪类书写顺序的真正原因

　　【前言】自我开始用a链接的四个伪类开始，我只记得说，就是这么规定的，最近在学习CSS基础，发现书写顺序的真正原因竟是因为。。。先来了解几个概念。

特指度：就是用来衡量一个选择器的优先级的。比如：

div——>1
.ab——>10
#nav——>100
div .ab——>11
#nav .ab div——>111

针对同一元素，优先级最高的选择器定义的样式被应用。

如果这优先级不清楚的可以阅读这篇文章：

http://blog.csdn.net/u013778905/article/details/52749250

层叠：层叠是指针对同一元素，相同的属性，应用优先级最高的选择器定义的样式，对于不同的属性，则合并应用。如：

<div id="nav" class="ab">这里是一个盒子容器</div>
div{color:#000;}
.ab{color:#ff0000;border:1px solid #000;}
#nav{color:#fff;background-color:#fff;}
//最终div的应用样式应该是
#nav{color:#fff;background-color:#fff;}
.ab{border:1px solid #000;}

伪类：简单点说，就是你没定义这个类，但它确实作为一个类来使用。（这些类确实存在，浏览器在后台会向这些类增加和删除元素）

　　了解了这几个概念之后，我们来看看

<a>

链接，

<a>

元素的作用是可以创建一个链接，链接对应4个状态：未访问，已访问，鼠标悬停，鼠标点击瞬间。四个伪类的书写顺序一定要正确，否则浏览器可能不会显示预期的结果。

a:link{color:black;}
a:visited{color:gray;}
a:hover{color:red;}
a:active{color:blue;}

　　为什么必须得按顺序呢？

　　这个问题可以这样来解答。

　　首先注意关键的两点：1.这4个伪类特指度相同。2.一个链接可能同时处于多种状态，即同时属于多个伪类。3.link和visited是常态效果，hover和active是瞬时效果。

　　未点击链接前，link伪类长期处于激活状态，鼠标悬停（或点击）时，

<a>

链接同时处于link和hover(或active)状态，由于它们特指度相同，在同时激活的情况下，后出现的伪类样式会覆盖前面的伪类样式，故link状态必须写在hover(或active)之前。

　　再讨论hover和active的顺序，若把hover放在active后面，当点击链接一瞬，实际你在激活active状态的同时触发了hover伪类,hover在后面覆盖了active的颜色，所以无法看到active的颜色。故hover在active之前

　　其次，若把visited放在hover后面，那已访问过的链接一直触发着visited伪类，会覆盖hover样式。

　　最后，其实link、visited两个伪类之间顺序无所谓。（因为它俩不可能同时触发，即又未访问同时又已访问。）

　　记这顺序有个小招数，“LoVe？ HA!”。