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