在CSS中定義a:link、a:visited、a:hover、a:active順序

a :link、a:hover、a:visited這幾個元素，定義CSS時候的順序不同，也會直接導致鏈接顯示的效果不同。

舉例來說：

我想讓未訪問鏈接顏色為藍色，活動鏈接為綠色，已訪問鏈接為紅色：

• 第一種情況：我定義的順序是a:visited、a:hover、a:link，這時會發現：把滑鼠放到未訪問過的藍色鏈接上時，它並不變成綠色，只有放在已訪問的紅色鏈接上，鏈接才會變綠。

• 第二種情況：我把CSS定義順序調整為：a:link、a:visited、a:hover，這時，無論你滑鼠經過的鏈接有沒有被訪問過，它都會變成綠色啦。

這是因為，一個滑鼠經過的未訪問鏈接同時擁有a:link、a:hover兩種屬性，在第一種情況下，a:link離它最近，所以它優先滿足a:link，而放棄a:hover的重複定義。

在第二種情況，無論鏈接有沒有被訪問過，它首先要檢查是否符合a:hover的標準（即是否有滑鼠經過它），滿足，則變成綠色，不滿足，則繼續向上查找，一直找到滿足條件的定義為止。

一句話：在CSS中，如果對於相同元素有針對不同條件的定義，宜將最一般的條件放在最上面，並依次向下，保證最下面的是最特殊的條件。

這樣，瀏覽器在顯示元素時，才會從特殊到一般、逐級向上驗證條件，才會使你的每一個CSS語句都起到效果。

當然，如果故意打亂順序，也會造成一些特殊的效果。比如，可以為鏈接製造出下劃線顏色與文字顏色的差異。

近日突然發現，原來這個CSS問題早已有高人提出啦。還是個老外呢。他給總結了一個便於記憶的「愛恨原則」（LoVe/HAte），即四種偽類的首字母:LVHA。

再重複一遍正確的順序：a:link、a:visited、a:hover、a:active .

最後經驗補充：

1.滑鼠經過的「未訪問鏈接」同時擁有a:link、a:hover兩種屬性，後面的屬性會覆蓋前面的屬性定義；

2.滑鼠經過的「已訪問鏈接」同時擁有a:visited、a:hover兩種屬性，後面的屬性會覆蓋前面的屬性定義；

所以說，a:hover定義一定要放在a:link、a:visited的後面.