淺析a標籤的4個僞類 .

 關於僞類，你們最熟悉的仍是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 的方式來記住這個排序是一種不錯的方法，推薦新手使用。