CSS 偽類 :link 失效顯示綠色？原來是 :visited 生效了！新手必看優先級陷阱

現象復現

a:link { color: red; }
a:visited { color: green; }
a:hover { border: 1px solid black; }
a:active { border: 4px solid green; }

明明寫了 `:link { color: red }`，瀏覽器打開卻直接顯示綠色。

核心原因：瀏覽器歷史記錄導致 :visited 生效

• `:link` —— **未訪問過**的鏈接
• `:visited` —— **已訪問過**的鏈接（瀏覽器歷史記錄中存在）
• 你測試的頁面鏈接**之前點擊過**，所以瀏覽器判定為 `:visited`，應用綠色樣式

驗證方法

1. 打開**隱私/無痕模式**（Ctrl+Shift+N）訪問同一頁面 → 應顯示紅色
2. 清除瀏覽器歷史記錄（僅勾選「瀏覽歷史」）→ 重新打開 → 變紅色 3. 換一個從未點擊過的 `href` 地址 → 顯示紅色

CSS 偽類優先級與寫法順序（LVHA 原則）

/* 必須按此順序寫入，否則後面樣式會覆蓋前面 */
a:link    { color: red; }      /* L - Link 未訪問 */
a:visited { color: purple; }   /* V - Visited 已訪問 */
a:hover   { color: orange; }   /* H - Hover 懸停 */
a:active  { color: blue; }     /* A - Active 點擊瞬間 */

❌ 寫成 `:hover` 在 `:link` 前 → 懸停時顏色不變
❌ 寫成 `:active` 在 `:hover` 前 → 點擊時無效果

:visited 隱私限制（重要）

為防止網站通過 `getComputedStyle` 探測用戶歷史，現代瀏覽器**限制 `:visited` 可設置的屬性**：

• ✅ 允許：`color`、`background-color`、`border-color`、`outline-color`、SVG fill/stroke
• ❌ 禁止：`font-size`、`display`、`visibility`、盒模型屬性、透明度等
• `getComputedStyle` 讀取 `:visited` 永遠返回 `:link` 的值

最佳實踐建議

1. 始終遵循 **LVHA 順序** 定義鏈接偽類
2. `:visited` 僅設置顏色類屬性，避免佈局變化 3. 若需區分已訪問/未訪問的圖標，使用 `background-image` + SVG filter 技巧 4. 開發調試時用無痕模式或清歷史，確保看到 `:link` 效果

總結

`:link` 顯示綠色是因為該鏈接**在瀏覽器歷史中**，觸發了 `:visited` 樣式。這不是 Bug，而是瀏覽器正確應用了用戶訪問狀態。記住 **LVHA 順序**，善用無痕模式調試，理解 `:visited` 隱私限制，即可駕馭鏈接樣式。