走心的a元素伪类顺序分析

---

    还记得我们刚学习css的时候，初识状态伪类时，用鼠标移入，点击a元素都会使它改变样式。，这可能使我们最早接触的网页“特效”了。
    众所周知a元素有4种常见状态伪类，:link :visited :hover :active。几乎在接触这些伪类的同时，我们也被告知了，这四个伪类的设置是有顺序的，也就是我们常说的lv好。之后，我们就一直这么用着，一直享受着这种设计带给我们的便利，但这其中的原理和思路有什么呢，让我们一起去看看，为什么lv包这么好。

1- 首先我们要明白用状态伪类设置样式的实质
状态伪类虽然是根据状态设置样式的，但接受这些样式的是一个具体的Dom元素，如，在文档中有<a class="test" id="test">测试<a>
对它添加以下样式

    a.test:hover{color:#CCC}

此时鼠标浮上测试a元素，颜色会改变，但这条语句实际上为一个具体的a元素设置样式，这不过这种样式是触发性的。这种样式会与其他作用在这个a元素上的相同（color）样式做优先级判断，优先级高的生效。最直观验证方式的是后面（前面也可）添加

    #test{color:#000;}

此时鼠标浮上测试a元素，颜色不会改变，始终为黑色，这里我们就可以看出状态伪类选择器和一般的选择器没有本质的区别，他们共同遵循选择器的优先级对样式生效的影响。明确这一点我们就能继续下面得讨论。

2- 我们要达到什么效果，我们想要什么
事实上我们想要的效果，非常的简单，我们不理你你就显示默认样式；我们触碰你你显示被触碰的样式；点你你显示被点的样式；点过你之后，不再理你，就显示被点过的样式。
看上去很简单，那来看看我们是怎么实现的。用专业点的话说，就是我们需要，（关键的来了）鼠标触碰（：hover）的样式覆盖默认样式（:link）和的点击过（：active）的样式。我们需要按下点击不放时（：active）的样式覆盖（：hover）的样式。我想到这里大部分的读者都应该已经明了，在样式的优先级相同时，后面设置的样式会覆盖之前设置的。
如果到这里还有疑惑那就再往下看看
3-多余的解释：状态共存和触发性
如果还有啥不理解的那可能就是状态共存和状态伪类样式的触发性了
举个两个栗子吧
点击（按住不放）一个被点击过的a元素，这个a元素实际上有:visited,:hover,:active 三个状态共存，三个状态的样式都有生效的机会，现在就是拼优先级（不好意思，你们仨优先级相等）和位置（后来居上）的时候了，这就是状态共存。
至于触发性就是给:hover设置了样式，如果不以鼠标“事件”触发，它只能在小黑屋等着，连和：link，：visited竞争的机会都没有。
如果觉得有点用的话给顶一下呗