在CSS中，a標(biāo)簽有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鏈接的默認(rèn)樣式，即a鏈接未被點擊過時a標(biāo)簽內(nèi)容在頁面上呈現(xiàn)的視覺效果。
a:visited是a鏈接被訪問過后的樣式，即a鏈接被點擊后a標(biāo)簽內(nèi)容在頁面上呈現(xiàn)的視覺效果。
a:hover是鼠標(biāo)移動到a鏈接上面時的樣式，即鼠標(biāo)懸浮在a標(biāo)簽內(nèi)容上方時，
其在頁面上呈現(xiàn)的視覺效果。
a:active是鼠標(biāo)點擊a鏈接時的樣式，
即從鼠標(biāo)按鍵按下到鼠標(biāo)按鍵彈起的過程中，a標(biāo)簽內(nèi)容在頁面上呈現(xiàn)的視覺效果。
我們來分析一下，一個a鏈接要發(fā)生所有的樣式，是怎樣一個過程：
a:link的效果，a:hover的效果，a:active的效果，a:visited的效果。如果，a:link寫在a:hover之后，依據(jù)CSS層疊特性，a:link將覆蓋a:hover樣式，
鼠標(biāo)移動到a鏈接上時a:hover將不會生效，這不是我們預(yù)期的效果，所以a:link要寫在a:hover前。
如果，a:link寫在a:active之后，同理，a:link覆蓋了a:active樣式，鼠標(biāo)點擊a鏈接時，a:active將不會生效，所以，a:link要寫在a:active前。
如果，a:hover寫在a:active之后，那么，a:hover講覆蓋a:active樣式，要想點擊a鏈接，
一定會先經(jīng)過鼠標(biāo)移動到a鏈接之上這個步驟，所以，當(dāng)點擊a鏈接時，a:active將不會生效，
所以，a:hover要寫在a:active前。
而a:visited，跟a:link類似，它發(fā)生在a:link之后，hover和a:active之前，它的位置，只能在第二位了。
以上便是我們分析出的lvha順序的由來。
筆者希望通過這簡短的文章，能讓一些死記硬背的前端er理解，為什么要按照lvha順序來寫樣式。
因為在筆者的認(rèn)知里，理解是最好的記憶方法。
【 微信掃一掃 】
