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