CSS 超鏈接順序 在網頁設計中，超鏈接是必不可少的元素之一。它可以將你的網站頁面之間互相連接起來，同時也可以將你的網站與外部網站或者靜態資源連接起來。通過添加樣式，我們可以美化超鏈接，讓它不再是單調的藍色下劃線。下面我們就來介紹一下超鏈接的順序問題。 在 CSS 中，超鏈接的樣式控制可以通過 a 標簽的四個偽類來實現，分別為：link，visited，hover 和 active。這四個偽類分別控制了超鏈接在不同狀態下的樣式。 我們可以使用以下代碼來設置超鏈接的樣式： ``` a:link { text-decoration: none; color: blue; } a:visited { text-decoration: none; color: purple; } a:hover { text-decoration: underline; color: red; } a:active { text-decoration: underline; color: green; } ``` 在設置超鏈接樣式時，一定要注意設置的順序。如果我們將樣式設置的順序顛倒，會產生一些奇怪的結果。比如說，我們將 hover 放在 visited 的前面： ``` a:link { text-decoration: none; color: blue; } a:hover { text-decoration: underline; color: red; } a:visited { text-decoration: none; color: purple; } a:active { text-decoration: underline; color: green; } ``` 在這段代碼中，鼠標懸停時超鏈接的顏色會變為紅色，但是一旦訪問過這個鏈接后再次懸停，顏色會變成藍色而不是預期中的紅色。這是因為 visited 在 hover 的后面，所以訪問后的鏈接樣式會覆蓋掉 hover 的樣式。 所以，我們應該按照 link、visited、hover 和 active 的順序來設置超鏈接樣式，這也是推薦的設置方式。 ``` a:link { text-decoration: none; color: blue; } a:visited { text-decoration: none; color: purple; } a:hover { text-decoration: underline; color: red; } a:active { text-decoration: underline; color: green; } ``` 上面這段代碼就是正確的超鏈接樣式設置順序。使用這種順序可以很好地避免樣式順序帶來的問題，同時也能夠更好的控制樣式效果。