: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

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