在CSS中，a標簽有4種偽類，分別為：
a:link, a:visited, a:hover, a:active對其稍有了解的前端er都知道，4個偽類是有固定順序的(LVHA)，
否則很容易出現預期之外的效果。
大部分人，都會用自己的方式，對這個順序死記硬背。
熟記順序，無疑是寫樣式時最快捷的方法，牛人們的記憶方法也是五花八門。
我見過有醬嬸的：lv的包包hao，這倒是實話。
比較奇葩的，我在baidu上輸入lvha，竟然自動關聯出鹿晗。
還有歪果仁們，則戲稱LvHa為愛恨原則。
記是記住了，但是疑惑也就來了，我知道這順序一定是有說法的，本著往祖墳上刨的原則，
下面就來探究一下，到底為什么。
首先，我再把4個偽類的效果嘮叨一遍：
a:link是a鏈接的默認樣式，即a鏈接未被點擊過時a標簽內容在頁面上呈現的視覺效果。
a:visited是a鏈接被訪問過后的樣式，即a鏈接被點擊后a標簽內容在頁面上呈現的視覺效果。
a:hover是鼠標移動到a鏈接上面時的樣式，即鼠標懸浮在a標簽內容上方時，
其在頁面上呈現的視覺效果。
a:active是鼠標點擊a鏈接時的樣式，
即從鼠標按鍵按下到鼠標按鍵彈起的過程中，a標簽內容在頁面上呈現的視覺效果。
我們來分析一下，一個a鏈接要發(fā)生所有的樣式，是怎樣一個過程：
a:link的效果，a:hover的效果，a:active的效果，a:visited的效果。如果，a:link寫在a:hover之后，依據CSS層疊特性，a:link將覆蓋a:hover樣式，
鼠標移動到a鏈接上時a:hover將不會生效，這不是我們預期的效果，所以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鏈接，
一定會先經過鼠標移動到a鏈接之上這個步驟，所以，當點擊a鏈接時，a:active將不會生效，
所以，a:hover要寫在a:active前。
而a:visited，跟a:link類似，它發(fā)生在a:link之后，hover和a:active之前，它的位置，只能在第二位了。
以上便是我們分析出的lvha順序的由來。
筆者希望通過這簡短的文章，能讓一些死記硬背的前端er理解，為什么要按照lvha順序來寫樣式。
因為在筆者的認知里，理解是最好的記憶方法。
【 微信掃一掃 】
