2.1 偽類 :hover
狀態偽類允許根據元素與使用者的互動或其當前狀態來應用樣式。這些偽類經常用來改善使用者介面，提供使用者動作的視覺反饋。
偽類 :hover 當使用者將滑鼠移到元素上時應用到該元素。
語法：
選擇器:hover {
屬性: 值;
}
範例：
在這個範例中，連結在滑鼠懸停時改變顏色並添加下劃線，而按鈕會改變背景色和文字顏色。
CSS
/* 滑鼠懸停時連結的樣式 */
a:hover {
color: red;
text-decoration: underline;
}
/* 滑鼠懸停時按鈕的樣式 */
button:hover {
background-color: #3498db;
color: white;
}
2.2 偽類 :focus
偽類 :focus 當元素獲得焦點時應用，例如點擊表單元件或用 Tab 鍵移動到它時。
語法：
選擇器:focus {
屬性: 值;
}
範例：
在這個範例中，輸入框在焦點時改變邊框顏色並移除外框，而文本框改變背景色。
CSS
/* 聚焦時輸入框的樣式 */
input:focus {
border-color: blue;
outline: none;
}
/* 聚焦時文本框的樣式 */
textarea:focus {
background-color: #f0f0f0;
}
2.3 偽類 :active
偽類 :active 當使用者激活元素時應用，例如按下滑鼠按鈕時。這個偽類經常用來創建當按下介面元素時的視覺反饋。
語法：
選擇器:active {
屬性: 值;
}
範例：
在這個範例中，連結在按下時改變顏色，而按鈕會改變背景色並稍微縮小，產生按下的效果。
CSS
/* 按下時連結的樣式 */
a:active {
color: green;
}
/* 按下時按鈕的樣式 */
button:active {
background-color: #2980b9;
transform: scale(0.98);
}
2.4 偽類 :visited
偽類 :visited 應用到用戶已經訪問過的連結。它允許將訪問過的連結與未訪問的連結進行不同的樣式化。
語法：
選擇器:visited {
屬性: 值;
}
範例
在這個範例中，已訪問過的連結顏色變成紫色，以區分未訪問的連結：
CSS
/* 已訪問過的連結樣式 */
a:visited {
color: purple;
}
2.5 組合偽類
可以組合狀態偽類來創建複雜的互動樣式。例如，可以為連結設置不同狀態的樣式。
完整实现範例
在這個範例中，連結的樣式根據其狀態而變化：基礎狀態、已訪問的連結、懸停時的連結和按下的連結：
CSS
/* 連結的基本樣式 */
a {
color: blue;
text-decoration: none;
}
/* 已訪問過的連結樣式 */
a:visited {
color: purple;
}
/* 懸停時連結的樣式 */
a:hover {
color: red;
text-decoration: underline;
}
/* 按下時連結的樣式 */
a:active {
color: green;
}
GO TO FULL VERSION