關於偽類，大家最熟悉的還是a標簽的4個偽類：:link 有鏈接屬性時:visited 鏈接地址已被訪問過:active 被用戶激活(在滑鼠點擊與釋放之間發生的事件):hover 其滑鼠懸停關於這四個偽類的排列次序，很多地方都能查到，可是為什麼這麼排列？從來沒有見過有人提及。這裡我就從技術、用戶體驗、
關於偽類，大家最熟悉的還是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 的後面。
今天下午的時候，我的助教聯繫我問“a的四個偽類是不是 L V H A啊？而不是你講的L V A H。新浪什麼的都是這樣的。我是從書上看的 love and hate。“
看到這個問題，我們不妨來看下H 和A 的關係。hover 和 active 分別表示滑鼠懸浮在 a標簽上 和滑鼠點下沒有彈起的時候。不難發現，這兩種狀態是不會並存的，也不會存在誰要覆蓋誰的問題。所以，不管是LVHA還是LVAH ，他們的效果都是一樣的。
不過用LOVE AND HATE 的方式來記住這個排序是一種不錯的方法，推薦新手使用。
