关于a:link、a:visited、a:hover、a:active使用过程中的顺序问题

文章标题有点长哈~

稍微有点前端基础的道友都知道，a标签是超链接，通过href属性指定链接的目标地址。在浏览器中，访问过的链接默认外观是紫色且带有紫色下划线，未访问的链接默认外观是蓝色且带有蓝色下划线，活动的链接（当我们鼠标点下不放时）默认外观是红色且带有红色下划线。

a标签的四个伪类（:link和:visited是a标签独有的）：

a:link ：用来设置a标签对象在未被访问前的样式。
a:visited ：用来设置a标签对象在已被访问后的样式。
a:hover ：用来设置标签对象在鼠标移入时的样式。
a:active ：用来设置标签对象在鼠标点下不放时的样式。

正常的顺序应该是a:link、a:visited、a:hover、a:active，如果我们打乱它们的顺序，比如把“:hover”放在最前面，那么我们把鼠标移入两个链接时，链接样式都不会发生改变，这是因为在CSS中，对于相同元素定义不同的伪类（或者叫做不同意义的标记）时，应该按一般到特殊，自上而下定义，这样浏览器在解析渲染样式时，才会从特殊到一般，自下而上逐级验证，使得设置的css样式都能生效。如果我们打乱了原有的顺序，浏览器解析时，会根据“就近原则”，先满足离它最近的，放弃“同等级”的重新定义。其实这个CSS问题早已有被海外大佬提出来了，他给总结了一个便于记忆的“爱恨原则”（LoVe/HAte），即四种伪类的首字母:LVHA。

    <style>
        /* :hover 表示鼠标移入的状态 */
        a:hover {
            color: purple;
            font-size: 30px;
        }

        /* :link 用来表示没有访问过的链接（正常的链接） */
        a:link {
            color: yellowgreen;
            font-size: 36px;
        }

        a:visited {
            color: fuchsia;
        }

        a:active {
            color: red;
        }
    </style>

 为了便于理解，我又做了一个实验，撇开a标签不说，我们就用普通的p标签来试试看，给p标签设置abc三个属性，分别给这三个类选择设置不同的背景色，事实证明，浏览器最终渲染出来的是黄绿色。

我的日常：

睡太早凌晨两点多就醒来了，看前端基础看到4点多钟趴在桌子上睡着了，一觉睡到11点钟，又迟到了。。。