你知道hover、active这四个伪类为何要按顺序写吗

刨根问底，你知道: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>

效果：

点击我

---

能够看到，因为此时link位于hover以后，因此当咱们鼠标移上a标签时，发现hover效果被覆盖了，并无变成红色，若是咱们把顺序换过来，那么就会看到咱们预想中的效果了

<style>

    #b2:link{
        color: green;
    }
    #b2:hover{
        color: red;
    }
</style>

<a href="#" id="b2">点击我</a>

效果：

点击我

此时，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>

点击我

因为:link放在最后面，因此无论是:hover仍是:active的效果都被：link覆盖了，因此此时不管鼠标以上仍是点击咱们都没法看到效果

---

<style>
    #b4:active{
        color: blue;
    }
    #b4:link{
        color: green;
    }

    #b4:hover{
        color: red;
    }
</style>

<a href="#" id="b4">点击我</a>

点击我

把:hover放到了最后，此时咱们能够看到，鼠标移上：hover产生了效果，同时点击时仍然没法看到：active的效果，由于此时的：active仍被：hover覆盖了

---

正确的代码

<style>
    
    #b5:link{
        color: green;
    }
    #b5:hover{
        color: red;
    }
    #b5:active{
        color: blue;
    }
</style>

<a href="#" id="b5">点击我</a>

点击我

至此，咱们终于看到了想要的效果，同时也得出第二个结论

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>

点击我

鼠标移上，点击，乍一看好像没问题呀，全部的效果都正确的产生了。可是，当咱们点击完了第一次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>

点击我

咱们改了一下位置，把：visited放到了：link以后，这时，不管是第一次点击，仍是第二次点击，：visited的效果都正确的产生了，同时又没有覆盖：hover和：active的效果，而最终的这个顺序，也正是咱们说的LvHa原则

看完此文，但愿你们可以对这4个伪类有更深入的认识，同时也能理解它们排列的顺序，其实若是理解了这几个伪类为何这样排以后，就再也不须要借助LoHa这样的窍门来记忆了，理解才是最好的记忆方法。