理解是最好的記憶方法 之 CSS中a連結的④個偽類為何有順序

標籤：selector   應該   過程   link   visit   最好   source   select   好的   

理解是最好的記憶方法 之 CSS中a連結的④個偽類為何有順序

在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之後，hover和a:active之前，它的位置，只能在第二位了。

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

轉自http://www.cnblogs.com/KilerMino/archive/2016/11/21/6086940.html

理解是最好的記憶方法 之 CSS中a連結的④個偽類為何有順序