这个问题困扰了我很久,后来经过查找资料 问询得到了解决,希望能帮到你

1.伪类选择器正确的书写方式为:

a:link     未访问时的状态
a:visited  已访问时候的状态
a:hover    鼠标经过时的状态
a:active   鼠标点击时的状态

首先注意关键的两点：1.这4个伪类特指度相同。2.一个链接可能同时处于多种状态，即同时属于多个伪类。

2.伪类选择器书写顺序的原理

然后我们就来剖析一下:

　 未点击链接前， link(未访问) 伪类长期处于激活状态，鼠标悬停（或点击）时，链接同时处于 link和hover(或active) 状态，由于它们特指度相同，在同时激活的情况下，后出现的伪类样式会覆盖前面的伪类样式，故 link(未访问) 状态必须写在 hover(鼠标经过)或(active 点击) 之前。

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

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

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

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

3.拓展

其实到公司工作后我们会用一些简便的书写方式:

a{
    color: red;
    font-size: 20px;
    text-decortion: none;
}
a:hover{
    color: orange;
    font-size: 30px;
    text-decortion: underline;
}