CSS 偽類提供了一種方法,讓我們可以根據元素的不同狀態來變更其樣式。例如,當使用者將滑鼠移到元素上或點擊元素時,偽類會根據這些狀態套用特定的樣式(突然覺得這應該在剛開始先交給大家 XD)。
註:最近重感冒好了一些,加上放了颱風假,明天開始會漸漸地把之前和這一篇缺的的 DEMO 補上。
以下是幾個常用的偽類介紹及應用:
:hover
(滑鼠懸停)當使用者將滑鼠懸停在元素上時,:hover
偽類會被觸發。它常用於改變連結或按鈕的樣式。
button:hover {
background-color: #f39c12;
color: white;
}
當使用者將滑鼠移到按鈕上時,背景會變成橙色,文字變成白色。
:focus
(焦點):focus
偽類會在表單元素(如輸入框)或其他可聚焦的元素獲得焦點時觸發。這通常發生在使用者點擊或按 Tab 鍵導航時。
input:focus {
border: 2px solid #3498db;
}
當輸入框獲得焦點時,邊框會變成藍色。
:active
(活動狀態):active
偽類會在使用者按下按鈕或連結時立即觸發,並在按住時保持生效。這通常用來提供點擊時的視覺回饋。
a:active {
color: red;
}
當使用者點擊連結時,連結的顏色會變為紅色。
:focus-within
(內部焦點):focus-within
偽類會在某個元素本身或其子元素獲得焦點時觸發。它非常適合處理表單組合元素,當其中任何一個子元素被聚焦時,改變父元素的樣式。
.form-group:focus-within {
background-color: #ecf0f1;
}
當表單組內的任一輸入框獲得焦點時,整個表單組的背景顏色會變淡。
:focus-visible
(可見焦點):focus-visible
主要針對鍵盤使用者或需要特定可見焦點指示的情況。這個偽類只會在可見焦點明顯需要時觸發,比如使用 Tab 鍵導航時。
button:focus-visible {
outline: 3px dashed #2ecc71;
}
當使用鍵盤導航到按鈕時,按鈕會顯示綠色虛線外框,方便視覺提示。
:target
(目標元素):target
偽類會針對 URL 中指定的片段識別符號(如錨點)進行樣式變更。例如,當你點擊一個連結並跳轉到該頁面的特定部分時,該部分可以顯示不同的樣式。
section:target {
background-color: #f1c40f;
border: 2px solid #e67e22;
}
當使用者點擊跳轉連結到某個 section
時,該區域的背景會變黃,並有橙色邊框。