CSS偽類是前端開發中不可或缺的強大工具，它們允許我們根據文檔樹之外的信息或簡單選擇器無法表達的狀態來樣式化元素。本文將全面探討CSS偽類的各種類型、使用場景和最佳實踐。
1. 偽類基礎概念
1.1 什么是偽類？
偽類（Pseudo-class）是CSS中的一種特殊關鍵字，用于選擇元素的特定狀態或特征。它們以冒號(:)開頭，可以附加到選擇器末尾來定義元素在特定狀態下的樣式。
/* 語法 */
selector:pseudo-class {property: value;
}/* 示例 - 鏈接懸停狀態 */
a:hover {color: #ff4500;
}
1.2 偽類與偽元素的區別
- 偽類：選擇元素的特定狀態（如:hover、:focus）
- 偽元素：選擇元素的特定部分（如::before、::first-line）
2. 常用偽類詳解
2.1 用戶交互偽類
2.1.1 :hover - 鼠標懸停狀態
button:hover {background-color: #4CAF50;transform: translateY(-2px);
}
2.1.2 :active - 激活狀態（元素被點擊時）
button:active {transform: translateY(1px);
}
2.1.3 :focus - 獲得焦點狀態
input:focus {outline: 2px solid #2196F3;box-shadow: 0 0 5px rgba(33, 150, 243, 0.5);
}
2.1.4 :focus-visible - 鍵盤焦點狀態
button:focus-visible {outline: 2px dashed #000;
}
2.2 結構偽類
2.2.1 :first-child / :last-child
/* 列表首項樣式 */
li:first-child {border-top-left-radius: 5px;border-top-right-radius: 5px;
}/* 列表末項樣式 */
li:last-child {border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;
}
2.2.2 :nth-child() - 強大的序號選擇
/* 隔行變色 */
tr:nth-child(even) {background-color: #f2f2f2;
}/* 選擇前3項 */
li:nth-child(-n+3) {font-weight: bold;
}/* 復雜模式：3n+1 (1,4,7...) */
div:nth-child(3n+1) {margin-right: 0;
}
2.2.3 :nth-of-type() - 按類型選擇
/* 每第三個段落 */
p:nth-of-type(3n) {color: #e91e63;
}
2.2.4 :not() - 反向選擇
/* 選擇所有不是.disabled的按鈕 */
button:not(.disabled) {cursor: pointer;
}/* 復合使用 */
li:not(:first-child):not(:last-child) {padding: 8px 0;
}
2.3 表單相關偽類
2.3.1 :checked - 選中狀態
input[type="checkbox"]:checked + label {color: #4CAF50;font-weight: bold;
}
2.3.2 :disabled / :enabled
input:disabled {background-color: #ebebe4;cursor: not-allowed;
}input:enabled {border-color: #66afe9;
}
2.3.3 :valid / :invalid
input:valid {border-color: #4CAF50;
}input:invalid {border-color: #f44336;
}
2.3.4 :placeholder-shown
input:placeholder-shown {font-style: italic;color: #999;
}
2.4 其他實用偽類
2.4.1 :target - URL片段標識的目標元素
section:target {background-color: #fffde7;animation: highlight 1s ease;
}
2.4.2 :empty - 空元素
div.empty:empty {display: none;
}div.empty:not(:empty) {padding: 15px;
}
2.4.3 :root - 文檔根元素
:root {--primary-color: #4285f4;--base-font-size: 16px;
}
3. CSS Level 4新增偽類
3.1 :is() - 簡化選擇器列表
/* 傳統寫法 */
header h1, header h2, header h3 {font-family: 'Roboto', sans-serif;
}/* 使用:is() */
header :is(h1, h2, h3) {font-family: 'Roboto', sans-serif;
}
3.2 :where() - 低特異性選擇
/* 特異性為0,0,1 */
article :where(h1, h2, h3) {margin-top: 1em;
}
3.3 :has() - 父元素選擇器（最強大）
/* 選擇包含img的article */
article:has(img) {background: #f5f5f5;
}/* 選擇后面跟著p的h2 */
h2:has(+ p) {margin-bottom: 0;
}
4. 偽類的高級應用技巧
4.1 組合使用偽類
/* 懸停且獲得焦點的按鈕 */
button:hover:focus {box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.5);
}/* 非第一個且非最后一個列表項 */
li:not(:first-child):not(:last-child) {padding: 8px 0;
}
4.2 動畫與過渡結合
.menu-item {transition: transform 0.3s ease;
}.menu-item:hover {transform: scale(1.05);
}.menu-item:active {transform: scale(0.98);
}
4.3 自定義表單控件
/* 自定義復選框 */
input[type="checkbox"] {opacity: 0;position: absolute;
}input[type="checkbox"] + label::before {content: "";display: inline-block;width: 18px;height: 18px;border: 2px solid #ccc;margin-right: 8px;vertical-align: middle;
}input[type="checkbox"]:checked + label::before {background-color: #4CAF50;border-color: #4CAF50;
}input[type="checkbox"]:disabled + label {color: #aaa;
}
4.4 響應式設計增強
/* 鼠標設備與觸摸設備區分 */
@media (hover: hover) {/* 只在支持懸停的設備上應用 */.card:hover {transform: translateY(-5px);box-shadow: 0 10px 20px rgba(0,0,0,0.1);}
}@media (hover: none) {/* 觸摸設備專用樣式 */.card:active {transform: scale(0.98);}
}
5. 性能與最佳實踐
5.1 性能優化
- 避免過度復雜的偽類組合
- 優先使用類選擇器替代結構性偽類（如:nth-child）
- 注意
:hover在移動設備上的表現
5.2 可訪問性考慮
- 不要僅依賴顏色變化表示狀態
- 確保
:focus狀態明顯可見 - 為自定義控件提供適當的ARIA屬性
5.3 瀏覽器兼容性
- 使用特性檢測（如@supports）處理新偽類
- 為關鍵功能提供漸進增強方案
- 考慮使用PostCSS或Autoprefixer處理前綴
6. 偽類的未來
CSS選擇器Level 4規范正在引入更多強大的偽類：
/* 匹配包含特定數量子元素的父元素 */
.container:has(> .item:nth-child(5)) {grid-template-columns: repeat(5, 1fr);
}/* 方向性偽類 */
:dir(rtl) {text-align: right;
}/* 范圍偽類 */
p:read-only {background-color: #f5f5f5;
}
7. 結語
CSS偽類為我們提供了強大的工具來創建動態、交互式和響應式的用戶界面。從簡單的懸停效果到復雜的結構選擇，偽類能夠幫助我們以更少的代碼實現更多的功能。隨著CSS標準的不斷發展，偽類的功能也在不斷增強，如:has()選擇器將徹底改變我們選擇元素的方式。
記住，良好的偽類使用應該：
- 增強用戶體驗而非干擾
- 保持代碼的可維護性
- 考慮所有用戶和設備
- 漸進增強，優雅降級
通過掌握這些偽類技術，你將能夠創建更加精致、響應迅速且易于訪問的網頁界面。
