關於偽類，大家最熟悉的還是a標籤的4個偽類：
:link        有連結屬性時
:visited    連結地址已被訪問過
:active     被使用者啟用(在滑鼠點選與釋放之間發生的事件)
:hover      其滑鼠懸停

關於這四個偽類的排列次序，很多地方都能查到，可是為什麼這麼排列？從來沒有見過有人提及。這裡我就從技術、使用者體驗、優先順序幾個角度簡單的闡述下我們為什麼這麼排列。

首先從技術層面上，

a的這四個偽類，分別表示了a的四種狀態，要注意的是，a可以只具有一種狀態（:link），或者同時具有2種或者三種狀態！比如說，任何一個有HREF屬性的a標籤，在未有任何操作時都已經具備了:link的條件，也就是滿足了有連結屬性這個條件；如果訪問過的a標籤，同時會具備 :link :visited 兩種狀態。把滑鼠移到訪問過的a標籤上的時候，a標籤就同時具備了 :link :visited :hover三種狀態。

其次從使用者體驗的角度，

在使用者使用超連結的時候，為了最佳的使用者體驗，要做到下面幾點：

第一：不管是否是被訪問過的超連結，只要我滑鼠移上的時候(:hover)都要有寫變化，比如變色、加下劃線等等，告訴使用者選中的是可以點選的超連結。

第二:不管是否訪問過，在a標籤被啟用時（:active），都應該有相同的樣式變化。也就是說，同一個a標籤，未訪問過時在被使用者啟用和被訪問時再被使用者啟用時要有相同的樣式。這個也很好理解，使用者點下同一個超連結時的效果不應該有差別。

第三:訪問過的a標籤可能要跟沒有訪問過的a相區分。

從CSS優先順序角度，

前面的文章講過具體的css優先順序，這裡我要說的是對於同一優先順序的相沖突樣式，瀏覽器的選擇問題。比如：
.test {color:red; color:green;}
或者：
.test {color:red;}
.test {color:green;}
上面兩個例子中，大家都知道，對於這個.test指向的內容，瀏覽器會顯示後一個屬性設定。也就是color:green.

說到這裡，很多人可能已經有頭緒了。結合上面的三點，不難分析我們為什麼要這麼排。

第一：不管什麼情況下滑鼠懸停都應該有一個樣式變化（:hover）,我們就把hover放在最後，防止具備其他狀態時，被其他狀態的設定覆蓋掉。
第二：當a被啟用時(:active)，我們要求不管是否訪問過，都應該有相同的樣式，也就是這個狀態的效果應該能夠覆蓋未被訪問時(:link)與 已訪問過(:visited)兩種狀態。應該放在 :link :hover的後面。
第三：被訪問過的a（:visited）可能會有不一樣的樣式屬性，用來區別a是否被訪問過。也就是說:visited 狀態的屬性可以覆蓋掉:link狀態的屬性， 即 :visited 要放在 :link 的後面。

10.20日編輯記錄

今天下午的時候，我的助教聯絡我問“a的四個偽類是不是 L V H A啊？而不是你講的L V A H。新浪什麼的都是這樣的。我是從書上看的 love and hate。“ 

看到這個問題，我們不妨來看下H 和A 的關係。hover 和 active 分別表示滑鼠懸浮在 a標籤上 和滑鼠點下沒有彈起的時候。不難發現，這兩種狀態是不會並存的，也不會存在誰要覆蓋誰的問題。所以，不管是LVHA還是LVAH ，他們的效果都是一樣的。

不過用LOVE AND HATE 的方式來記住這個排序是一種不錯的方法，推薦新手使用。