超連結（links）是網頁中不可或缺的元素，本文將介紹 CSS 裡控制超連結狀態的偽類（Pseudo-classes），讓你可以對不同狀態的超連結進行樣式設定，以此提升使用者體驗。
超連結狀態:link、visited、focus、hover、active
超連結有五個主要的狀態，每種狀態都可以透過偽類來選擇：
- 未訪問狀態（
:link）：沒有被點擊過的超連結。 - 已訪問狀態（
:visited）：已經被點擊並訪問過的超連結。 - 滑鼠懸停狀態（
:hover）：當滑鼠指標移動到超連結上方時的狀態。 - 焦點狀態（
:focus）：獲得焦點的超連結，通常是透過鍵盤 Tab 鍵或點擊獲得。 - 點擊中狀態（
:active）：正在點擊但還沒放開的超連結。
:focus 狀態對於無障礙設計來說很重要。有些使用者可能無法使用滑鼠，而是要靠鍵盤的 Tab 鍵，才能知道當前聚焦在哪個元素上。
狀態的樣式設定順序
在撰寫 CSS 時，設定超連結狀態的順序相當重要。建議照著以下順序設定，確保樣式能正確套用：
:link → :visited → :hover → :focus → :active
a:link {
color: blue; /* 未訪問超連結的顏色:藍色 */
}
a:visited {
color: purple; /* 已訪問超連結的顏色:紫色 */
}
a:hover {
color: red; /* 滑鼠懸停時的顏色:紅色 */
text-decoration: underline; /* 加上底線 */
}
a:focus {
outline: 2px solid green; /* 獲得焦點時的外框:綠色 */
outline-offset: 2px; /* 外框與文字的距離 */
}
a:active {
color: orange; /* 點擊中超連結的顏色:橙色 */
}
結語
以上就是 CSS 的超連結狀態偽類（Pseudo-classes），你可以開始修改網頁的超連結樣式，提升網頁的美觀性與使用者體驗。