【前言】自我開始用a連結的四個偽類開始，我只記得說，就是這麼規定的，最近在學習CSS基礎，發現書寫順序的真正原因竟是因為。。。先來了解幾個概念。

特指度：就是用來衡量一個選擇器的優先順序的。比如：

div——>1
.ab——>10
#nav——>100
div .ab——>11
#nav .ab div——>111

針對同一元素，優先順序最高的選擇器定義的樣式被應用。

層疊：層疊是指標對同一元素，相同的屬性，應用優先順序最高的選擇器定義的樣式，對於不同的屬性，則合併應用。如：

<div id="nav" class="ab">這裡是一個盒子容器<
 
/div>
div{color:#000;}
.ab{color:#ff0000;border:1px solid #000;}
#nav{color:#fff;background-color:#fff;}
//最終div的應用樣式應該是
#nav{color:#fff;background-color:#fff;}
.ab{border:1px solid #000;}

偽類：簡單點說，就是你沒定義這個類，但它確實作為一個類來使用。（這些類確實存在，瀏覽器在後臺會向這些類增加和刪除元素）

　　瞭解了這幾個概念之後，我們來看看<a>連結，<a>元素的作用是可以建立一個連結，連結對應4個狀態：未訪問，已訪問，滑鼠懸停，滑鼠點選瞬間。四個偽類的書寫順序一定要正確，否則瀏覽器可能不會顯示預期的結果。

a:link{color:black;}
a:visited{color:gray;}
a:hover{color:red;}
a:active{color:blue;}

　　為什麼必須得按順序呢？

　　這個問題可以這樣來解答。

　　首先注意關鍵的兩點：1.這4個偽類特指度相同。2.一個連結可能同時處於多種狀態，即同時屬於多個偽類。3.link和visited是常態效果，hover和active是瞬時效果。

　　未點選連結前，link偽類長期處於啟用狀態，滑鼠懸停（或點選）時，<a>連結同時處於link和hover(或active)狀態，由於它們特指度相同，在同時啟用的情況下，後出現的偽類樣式會覆蓋前面的偽類樣式

　　再討論hover和active的順序，若把hover放在active後面，當點選連結一瞬，實際你在啟用active狀態的同時觸發了hover偽類,hover在後面覆蓋了active的顏色，所以無法看到active的顏色。故hover在active之前

　　其次，若把visited放在hover後面，那已訪問過的連結一直觸發著visited偽類，會覆蓋hover樣式。

　　最後，其實link、visited兩個偽類之間順序無所謂。（因為它倆不可能同時觸發，即又未訪問同時又已訪問。）

　　記這順序有個小招數，“LoVe？ HA!”。