提到 css 的hover 選擇器，想必大家都不陌生（:hover 用於設定滑鼠指向某元素上後顯示的樣式）
除了常用的 hover 選擇器，還有3個可以和它搭配使用的選擇器：
:link 設定未被訪問頁面的連結
:visited 用於設定已被訪問的頁面連結
:active 用於活動連結
一般 hover 某元素後，應該會顯示設定的樣式，如下面的"點我"。滑鼠指上去後會顯示設定的樣式，這裡為字型變成紅色
問題：最近遇到一個問題，hover 以後的樣式怎麼都不生效，程式碼如下
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<style>
a:hover {
color: red;
}
a:link {
color: #000;
} a:visited {
color: #ccc;
} a:active {
color: blue;
} a {
font-size: 30px;
}
</style>
</head> <body>
<a href="#">點我</a>
</body> </html>
開始我以為是程式碼寫錯了，仔細檢查後，發現程式碼並沒有錯，這令我十分費解
後來無意中在w3c找到了答案，以前完全沒有注意的一句話：
注：在 CSS 定義中，:hover 必須位於 :link 和 :visited 之後（如果存在的話），這樣樣式才能生效
這時候在看我上面的程式碼，hover 寫在 link 和 visited 的前面，此刻茅塞頓開，修改後的程式碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
a:link {
color: #000;
}
a:visited {
color:#ccc ;
}
a:hover {
color: red;
}
a:active {
color: blue;
}
</style>
</head>
<body>
<!--被點選訪問過的超連結樣式不在具有hover和active了,解決方法是改變CSS屬性的排列順序: L-V-H-A（link,visited,hover,active）-->
<a href="#">點我</a>
</body>
</html>