刨根问底，你知道:hover等4个伪类为什么要按顺序排列吗
引言
:link,:visited,:hover,:active这4个伪类大家都不陌生，4个伪类要按照LvHa这个爱恨原则来排（外国友人起的记忆方法），不然有些效果会出问题。
但是你们都想过这几个属性为什么要按顺序排吗？
:link和:hover
当鼠标移动到a标签上时，会触发a标签上的:hover效果，但同时，此时的:link效果仍然存在于a标签上，既然两个效果都在a标签上起作用，那么根据css的就近原则，写在后面的css样式就覆盖了前面的效果，所以
<style>
#b1:hover{
color: red;
}
#b1:link{
color: green;
}
</style>
<a href="#" id="b1">点击我</a>
效果：
#b1:hover{
color: red;
}
#b1:link{
color: green;
}
可以看到，由于此时link位于hover之后，所以当我们鼠标移上a标签时，发现hover效果被覆盖了，并没有变成红色，如果我们把顺序换过来，那么就会看到我们预想中的效果了
<style>
#b2:link{
color: green;
}
#b2:hover{
color: red;
}
</style>
<a href="#" id="b2">点击我</a>
效果：
#b2:link{
color: green;
}
#b2:hover{
color: red;
}
此时，hover效果起作用了，所以我们可以得出结论一：hover要位于link之后
:link、:hover和:active
还是原本的思路分析，当鼠标点击时，此时:link、:hover和:active都在a标签上产生效果，所以还是根据就近原则，上代码
<style>
#b3:hover{
color: red;
}
#b3:active{
color: blue;
}
#b3:link{
color: green;
}
</style>
<a href="#" id="b3">点击我</a>
#b3:hover{
color: red;
}
#b3:active{
color: blue;
}
#b3:link{
color: green;
}
由于:link放在最后面，所以不管是:hover还是:active的效果都被：link覆盖了，所以此时无论鼠标以上还是点击我们都无法看到效果
<style>
#b4:active{
color: blue;
}
#b4:link{
color: green;
}
#b4:hover{
color: red;
}
</style>
<a href="#" id="b4">点击我</a>
#b4:active{
color: blue;
}
#b4:link{
color: green;
}
#b4:hover{
color: red;
}
把:hover放到了最后，此时我们可以看到，鼠标移上：hover产生了效果，同时点击时仍然无法看到：active的效果，因为此时的：active仍被：hover覆盖了
正确的代码
<style>
#b5:link{
color: green;
}
#b5:hover{
color: red;
}
#b5:active{
color: blue;
}
</style>
<a href="#" id="b5">点击我</a>
#b5:link{
color: green;
}
#b5:hover{
color: red;
}
#b5:active{
color: blue;
}
至此，我们终于看到了想要的效果，同时也得出第二个结论
hover必须位于link之后，同时active必须位于hover和link之后
所以目前我们的顺序就是link/hover/active
visited
那么visited应该放哪里呢？我们先试着把它放到最后
<style>
#b6:link{
color: green;
}
#b6:hover{
color: red;
}
#b6:active{
color: blue;
}
#b6:visited{
color: yellow;
}
</style>
<a href="#1" id="b6">点击我</a>
#b6:link{
color: green;
}
#b6:hover{
color: red;
}
#b6:active{
color: blue;
}
#b6:visited{
color: yellow;
}
鼠标移上，点击，乍一看好像没问题呀，所有的效果都正确的产生了。但是，当我们点击完了第一次a标签，再次进行点击的时候，发现:hover和：active都不起效果了，原来是因为此时:visited起了作用，同时也由于：visited写在最后，所以第二次点击的时候覆盖了之前的效果
最终的代码
<style>
#b7:link{
color: green;
}
#b7:visited{
color: yellow;
}
#b7:hover{
color: red;
}
#b7:active{
color: blue;
}
</style>
<a href="#2" id="b7">点击我</a>
#b7:link{
color: green;
}
#b7:visited{
color: yellow;
}
#b7:hover{
color: red;
}
#b7:active{
color: blue;
}
我们改了一下位置，把：visited放到了：link之后，这时，无论是第一次点击，还是第二次点击，：visited的效果都正确的产生了，同时又没有覆盖：hover和：active的效果，而最终的这个顺序，也正是我们说的LvHa原则
看完此文，希望大家能够对这4个伪类有更深刻的认识，同时也能理解它们排列的顺序，其实如果理解了这几个伪类为什么这样排之后，就不再需要借助LoHa这样的窍门来记忆了，理解才是最好的记忆方法。