你知道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這樣的竅門來記憶了，理解才是最好的記憶方法。