在網頁設計中，超連結（<a> 標籤）是最常見的互動元素之一，用於導航、下載和觸發各種操作。
透過 CSS 的 Pseudo-classes（偽類），我們可以根據用戶與這些連結的互動情況來應用不同的樣式，讓網頁具有更好的用戶體驗。
本文將為新手介紹如何使用 CSS 偽類來控制超連結的狀態，包括 :link、:visited、:hover、:active，以及它們的應用場景和使用順序。
什麼是 Pseudo-classes（偽類）？
Pseudo-classes 是一種 CSS 選擇器，用來選擇元素的特定狀態，例如當元素被點擊、滑鼠懸停、或當前處於選中的情況下。
針對超連結（<a> 標籤），CSS 定義了幾個常用的偽類，來幫助開發者根據連結的不同狀態，設置樣式。
a 標籤常用的 Pseudo-classes
:link — 未訪問的連結
:link 偽類是用來選擇尚未被點擊過的超連結。
當一個連結在頁面中呈現，但用戶還沒有點擊過它時，這個偽類會生效。
語法：
a:link {
color: blue;
}範例：
<a href="https://example.com">前往 Example</a>在這裡，當連結未被點擊時，文字會呈現藍色。
:visited — 已訪問的連結
:visited 偽類用來選擇，已經被用戶點擊並訪問過的連結。
這樣可以幫助用戶，區分他們已經訪問過的網頁。
語法：
a:visited {
color: purple;
}範例：
<a href="https://example.com">前往 Example</a>當用戶點擊過連結並且已經訪問該網址後，文字將會變成紫色，表明這是一個已經訪問過的連結。
:hover — 滑鼠懸停在連結上
:hover 偽類會在滑鼠懸停在連結上的時候觸發。這常常用來提供視覺反饋，讓用戶知道該連結是可以點擊的。
語法：
a:hover {
color: red;
text-decoration: underline;
}範例：
<a href="https://example.com">前往 Example</a>當用戶將滑鼠移到連結上時，文字會變為紅色，並且加上下劃線，提示用戶這是可點擊的連結。
:active — 被點擊的連結
:active 偽類在連結被點擊的瞬間生效，通常只持續很短的時間，直到點擊動作完成。
這個偽類可以用來顯示連結在被點擊時的樣式變化。
語法：
a:active {
color: orange;
}範例：
<a href="https://example.com">前往 Example</a>當用戶點擊連結時，連結的文字會瞬間變成橙色。
a 標籤偽類的應用順序
在使用 a 標籤的偽類時，應該按照特定的順序來定義樣式，否則樣式可能會失效或應用不正確。
這個順序通常記作 LVHA，即：
:link— 連結尚未被訪問時的樣式:visited— 連結已經被訪問過時的樣式:hover— 滑鼠懸停在連結上時的樣式:active— 連結被點擊時的樣式
這個順序非常重要，因為 CSS 會依次應用樣式。
如果順序錯誤，可能導致某些樣式被覆蓋。
正確順序範例
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: orange;
}應用場景與最佳實踐
提供視覺反饋
在設計網站時，使用 :hover 和 :active 來提供視覺反饋，能讓用戶更容易辨識哪些元素是可以點擊的。
改變連結顏色或添加下劃線等樣式，能夠有效提升用戶體驗。
使用安全的 :visited 樣式
由於隱私問題，現代瀏覽器對於 :visited 偽類的樣式有一定的限制。
你只能改變顏色，不能改變連結的其他樣式屬性（例如 背景 或 邊框）。
這是為了防止惡意網站，通過樣式檢測用戶的瀏覽歷史。
避免過度使用動畫或轉變效果
雖然 :hover 能夠為用戶提供視覺提示，但過度使用動畫或過度強調的樣式，可能會讓用戶感到困惑。
保持樣式的簡潔和一致性，可以提供更好的使用體驗。
其他常見的 a 標籤偽類
除了上面提到的 :link、:visited、:hover 和 :active，還有一些較少見的偽類可以用來控制 a 標籤的特殊狀態。
:focus
當用戶使用鍵盤瀏覽網站時，連結會處於焦點狀態，即用戶按下 Tab 鍵時，連結會被選中，這時可以使用 :focus 偽類來設置樣式。
a:focus {
outline: 2px solid blue;
}當連結獲得焦點時，會顯示藍色邊框，幫助用戶識別當前的焦點元素。
:target
如果連結指向的是頁面內的某個部分（如使用 # 錨點），當這個部分被激活時，:target 偽類可以應用樣式。
a:target {
background-color: yellow;
}這對於頁面內導航非常有用，當錨點元素被點擊時，背景色會變成黃色，幫助用戶定位內容。
結語
CSS 偽類為我們提供了一種強大的方式來處理 <a> 標籤的不同狀態，並改善用戶與網站的互動體驗。
通過使用 :link、:visited、:hover 和 :active 等常見偽類，你可以根據連結的狀態靈活地設置樣式。
在應用這些偽類時，遵循正確的樣式順序（LVHA），能夠確保樣式的正確應用，並且在設計時保持一致性和簡潔性，從而提升用戶體驗。