初學者指南: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
,即:
: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),能夠確保樣式的正確應用,並且在設計時保持一致性和簡潔性,從而提升用戶體驗。