理解是最好的記憶方法 之 CSS中a連接的4個僞類爲什麼有順序

在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連接要發生全部的樣式，是怎樣一個過程：

• 首次進入頁面時，a連接未被點擊過，應該呈現a:link的效果，
• 當鼠標移動到a連接上時，應該呈現a:hover的效果，
• 當鼠標點擊a連接時，應該呈現a:active的效果，
• 最後，a連接應該呈現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 相似，它發生在 a:link 以後，a:hover 和 a:active 以前，它的位置，只能在第二位了。

以上即是咱們分析出的lvha順序的由來。
但願經過這簡短的文章，能讓一些死記硬背的前端er理解，爲何要按照lvha順序來寫樣式。由於在筆者的認知裏，理解是最好的記憶方法。

各位看官，您是否贊同個人認知呢？