在CSS中，a標簽有4種偽類，分別為：

a:link, a:visited, a:hover, a:active

對其稍有了解的前端er都知道，4個偽類是有固定順序的(LVHA)，
否則很容易出現(xiàn)預(yù)期之外的效果。

大部分人，都會用自己的方式，對這個順序死記硬背。
熟記順序，無疑是寫樣式時最快捷的方法，牛人們的記憶方法也是五花八門。
我見過有醬嬸的：lv的包包hao，這倒是實話。
比較奇葩的，我在baidu上輸入lvha，竟然自動關(guān)聯(lián)出鹿晗。
還有歪果仁們，則戲稱LvHa為愛恨原則。
記是記住了，但是疑惑也就來了，我知道這順序一定是有說法的，本著往祖墳上刨的原則，
下面就來探究一下，到底為什么。

首先，我再把4個偽類的效果嘮叨一遍：

a:link是a鏈接的默認樣式，即a鏈接未被點擊過時a標簽內(nèi)容在頁面上呈現(xiàn)的視覺效果。
a:visited是a鏈接被訪問過后的樣式，即a鏈接被點擊后a標簽內(nèi)容在頁面上呈現(xiàn)的視覺效果。
a:hover是鼠標移動到a鏈接上面時的樣式，即鼠標懸浮在a標簽內(nèi)容上方時，
其在頁面上呈現(xiàn)的視覺效果。 a:active是鼠標點擊a鏈接時的樣式，
即從鼠標按鍵按下到鼠標按鍵彈起的過程中，a標簽內(nèi)容在頁面上呈現(xiàn)的視覺效果。

我們來分析一下，一個a鏈接要發(fā)生所有的樣式，是怎樣一個過程：

• 首次進入頁面時，a鏈接未被點擊過，應(yīng)該呈現(xiàn)a:link的效果，
• 當鼠標移動到a鏈接上時，應(yīng)該呈現(xiàn)a:hover的效果，
• 當鼠標點擊a鏈接時，應(yīng)該呈現(xiàn)a:active的效果，
• 最后，a鏈接應(yīng)該呈現(xiàn)a:visited的效果。

如果，a:link寫在a:hover之后，依據(jù)CSS層疊特性，a:link將覆蓋a:hover樣式，
鼠標移動到a鏈接上時a:hover將不會生效，這不是我們預(yù)期的效果，所以a:link要寫在a:hover前。

如果，a:link寫在a:active之后，同理，a:link覆蓋了a:active樣式，鼠標點擊a鏈接時，
a:active將不會生效，所以，a:link要寫在a:active前。

如果，a:hover寫在a:active之后，那么，a:hover講覆蓋a:active樣式，要想點擊a鏈接，
一定會先經(jīng)過鼠標移動到a鏈接之上這個步驟，所以，當點擊a鏈接時，a:active將不會生效，
所以，a:hover要寫在a:active前。

而a:visited，跟a:link類似，它發(fā)生在a:link之后，hover和a:active之前，它的位置，只能在第二位了。

以上便是我們分析出的lvha順序的由來。
筆者希望通過這簡短的文章，能讓一些死記硬背的前端er理解，為什么要按照lvha順序來寫樣式。
因為在筆者的認知里，理解是最好的記憶方法。