初學者指南:CSS 中 a 標籤的 Pseudo-classes(偽類)

更新日期: 2024 年 10 月 21 日

在網頁設計中,超連結(<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,即:

  1. :link — 連結尚未被訪問時的樣式
  2. :visited — 連結已經被訪問過時的樣式
  3. :hover — 滑鼠懸停在連結上時的樣式
  4. :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),能夠確保樣式的正確應用,並且在設計時保持一致性和簡潔性,從而提升用戶體驗。


參考資料

Similar Posts

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *