CSS 超連結偽類完整指南：四狀態樣式、層疊優先級與實戰佈局技巧

四大偽類狀態與觸發時機

⚠️ LVHA 宣告順序鐵律

瀏覽器按「後來居上」處理同權重規則，必須按 L-V-H-A 順序寫入，否則狀態互相覆蓋失效：

a:link    { color: #0066cc; text-decoration: none; }
a:visited { color: #663399; text-decoration: none; }
a:hover   { color: #ff3300; text-decoration: underline; }
a:active  { color: #cc0000; background: #ffeeee; }

記憶口訣：LoVe HAte (愛與恨)。

常用內聯屬性速查

• color / background-color / background-image
• text-decoration：none、underline、overline、line-through
• font-weight / font-style / font-family
• padding / margin / border-radius (配合 display: inline-block)
• transition：all 0.3s ease 讓狀態切換絲滑

實戰案例一：搜尋結果頁連結樣式 (百度風)

<style>
  .result a:link, .result a:visited { color: #333; text-decoration: none; }
  .result a:hover { color: #c00; text-decoration: underline; }
  .result .url { color: #008000; font-size: 12px; }
  .result .url a:hover { text-decoration: none; } /* URL 不加底線 */
</style>

<div class="result">
  <a href="..."><span>標題關鍵詞</span> 摘要內容...</a>
  <p class="url"><a href="...">www.example.com</a> 2024-01-15</p>
</div>

實戰案例二：導航欄按鈕化連結 (搜狐教育風)

<style>
  .nav-bar { background: #f5f5f5; padding: 10px 0; }
  .nav-bar a { display: inline-block; padding: 6px 14px; margin: 0 4px; 
               border-radius: 4px; font-size: 14px; color: #333; text-decoration: none; }
  .nav-bar a:link, .nav-bar a:visited { background: transparent; }
  .nav-bar a:hover { background: #0099dd; color: #fff; }
  .nav-bar a:active { background: #0077aa; transform: scale(0.98); }
  .nav-bar a.current { background: #0099dd; color: #fff; pointer-events: none; } /* 當前頁 */
</style>

<div class="nav-bar">
  <a href="/news">新聞</a>
  <a href="/edu" class="current">教育</a>
  <a href="/tech">科技</a>
  <a href="/sports">體育</a>
</div>

進階技巧

1. 訪問狀態隱私限制 (現代瀏覽器)

為防歷史探測，:visited 只能修改 color、background-color、border-color、outline-color、column-rule-color、fill/stroke (SVG)；getComputedStyle 總返回未訪問樣式。不要依賴 :visited 做關鍵邏輯。

2. 鍵盤無障礙 :focus-visible

a:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; }

僅鍵盤導航顯示輪廓，滑鼠點擊不顯示，兼顧美觀與無障礙。

3. 偽元素配合圖標

a.external::after { content: " ↗"; font-size: 0.8em; opacity: 0.7; }
a.pdf::after { content: " 📄"; }

4. 觸控設備 :hover 陷阱

移動端點擊會觸發 :hover 並停留，導致「點擊後樣式不消失」。解決：

@media (hover: none) {
  a:hover { /* 重置為 link/visited 樣式 */ }
}

總結

• 牢記 LVHA 順序，配合 transition 打造絲滑交互。
• 善用類選擇器 (.btn, .nav a) 限制作用域，避免全局 a 污染。
• 關注 :focus-visible 無障礙、:visited 隱私限制、觸控設備 :hover 行為差異。
• 語義化 HTML：導航用 <nav><a>、按鈕用 <button>，別濫用 <a href="#">。