偽類選擇器（pseudo-class selector）是一種用于選擇HTML元素特定狀態或特征的關鍵字，它允許開發者基于文檔樹之外的信息（如用戶交互、元素位置或狀態變化）來選擇元素并應用樣式。
偽類選擇器以冒號(:)開頭，附加在基本選擇器后面，用于定義元素的特殊狀態。
偽類選擇器分類及用法
1. 狀態偽類（鏈接和用戶操作）
/* 未訪問的鏈接 */
a:link {color: blue;
}/* 已訪問的鏈接 */
a:visited {color: purple;
}/* 鼠標懸停狀態 */
a:hover {color: red;text-decoration: underline;
}/* 激活狀態（鼠標按下未釋放） */
a:active {color: green;
}/* 獲取焦點的元素 */
input:focus {outline: 2px solid orange;
}2. 結構偽類（基于文檔結構）
/* 選擇第一個子元素 */
li:first-child {font-weight: bold;
}/* 選擇最后一個子元素 */
li:last-child {border-bottom: none;
}/* 選擇第n個子元素 */
li:nth-child(2) {color: red;
}/* 選擇奇數元素 */
tr:nth-child(odd) {background-color: #f2f2f2;
}/* 選擇偶數元素 */
tr:nth-child(even) {background-color: #e6e6e6;
}/* 選擇特定公式的元素 */
li:nth-child(3n+1) {margin-left: 0;
}/* 選擇倒數第n個子元素 */
li:nth-last-child(2) {font-style: italic;
}/* 選擇唯一子元素 */
div:only-child {padding: 10px;
}/* 選擇第一個同類元素 */
p:first-of-type {font-size: 1.2em;
}/* 選擇最后一個同類元素 */
p:last-of-type {margin-bottom: 0;
}/* 選擇第n個同類元素 */
p:nth-of-type(2n) {background: #f8f8f8;
}/* 選擇唯一同類元素 */
img:only-of-type {border: 3px solid black;
}3. 表單相關偽類
/* 啟用狀態的元素 */
input:enabled {border: 1px solid #ccc;
}/* 禁用狀態的元素 */
input:disabled {background-color: #f0f0f0;color: #999;
}/* 被選中的復選框或單選按鈕 */
input:checked {outline: 2px solid blue;
}/* 必填字段 */
input:required {border-left: 3px solid red;
}/* 可選字段 */
input:optional {border-left: 3px solid #ccc;
}/* 有效輸入 */
input:valid {border-color: green;
}/* 無效輸入 */
input:invalid {border-color: red;
}/* 在范圍之內 */
input:in-range {color: green;
}/* 超出范圍 */
input:out-of-range {color: red;
}/* 只讀元素 */
input:read-only {background-color: #f5f5f5;
}/* 可讀可寫元素 */
input:read-write {background-color: white;
}4. 其他偽類
/* 否定選擇器 */
div:not(.special) {opacity: 0.8;
}/* 根元素 */
:root {--main-color: #4d9fff;
}/* 空元素 */
div:empty {display: none;
}/* 目標元素（當前活動的錨點目標） */
:target {background-color: yellow;
}/* 選擇包含指定文本的元素 */
p:contains("重要") {font-weight: bold;
}/* 語言選擇器 */
html:lang(zh) {font-family: "Microsoft YaHei", sans-serif;
}5. CSS3新增的偽類（部分）
/* 選擇未選中的單選按鈕或復選框 */
input:indeterminate {opacity: 0.5;
}/* 選擇默認選項 */
option:default {font-weight: bold;
}/* 全屏模式下的元素 */
video:fullscreen {width: 100%;height: auto;
}/* 匹配正在播放的媒體元素 */
video:playing {border: 2px solid green;
}/* 匹配暫停狀態的媒體元素 */
video:paused {border: 2px solid #ccc;
}使用技巧
組合使用：偽類可以與其他選擇器組合使用
form input:focus:invalid {border-color: red; }性能考慮：結構偽類（如nth-child）可能影響頁面渲染性能，尤其在大型DOM中
瀏覽器兼容性：較新的偽類（如:focus-within）需要檢查瀏覽器支持情況
優先級：偽類與類選擇器具有相同的特異性權重（0,1,0）
注意事項
某些偽類（如:visited）由于安全原因，樣式受到瀏覽器限制
結構偽類是基于元素在父元素中的位置，而不是在整個文檔中的位置
偽類順序很重要，特別是對于鏈接狀態（LoVe-HAte順序：:link,?:visited,?:hover,?:active）
)
