html中的偽類有哪些

# HTML中的偽類有哪些

## 什么是偽類

偽類（Pseudo-class）是CSS中用于定義元素特殊狀態的選擇器。它們允許開發者根據用戶交互、文檔結構或其他外部條件來樣式化元素，而無需修改HTML結構或添加額外的class。

偽類的語法特征是在選擇器后跟一個冒號（:），例如`:hover`或`:first-child`。CSS3規范將偽類與偽元素（::）明確區分開來。

---

## 偽類的主要分類

### 1. 用戶交互偽類

這些偽類與用戶的交互行為相關：

- `:hover` - 鼠標懸停在元素上時
- `:active` - 元素被激活（如鼠標點擊）時
- `:focus` - 元素獲得焦點時（如表單輸入）
- `:focus-visible` - 元素通過鍵盤導航獲得焦點時
- `:focus-within` - 元素或其子元素獲得焦點時

```css
button:hover {
  background-color: #4CAF50;
}
input:focus {
  border-color: blue;
}

2. 結構偽類

基于文檔結構的偽類選擇器：

• :first-child - 選擇父元素的第一個子元素
• :last-child - 選擇父元素的最后一個子元素
• :nth-child(n) - 選擇父元素的第n個子元素
• :nth-last-child(n) - 從末尾開始計數
• :only-child - 選擇沒有兄弟元素的子元素
• :first-of-type - 選擇同類型中的第一個
• :last-of-type - 選擇同類型中的最后一個
• :nth-of-type(n) - 選擇同類型中的第n個
• :empty - 選擇沒有子元素的元素

li:nth-child(odd) {
  background: #f2f2f2;
}
p:first-of-type {
  font-size: 1.2em;
}

3. 表單相關偽類

專門用于表單元素的偽類：

• :checked - 被選中的單選/復選框
• :disabled - 被禁用的表單元素
• :enabled - 可用的表單元素
• :required - 標記為必填的字段
• :optional - 非必填字段
• :valid - 通過驗證的輸入
• :invalid - 未通過驗證的輸入
• :in-range/:out-of-range - 數值范圍判斷
• :read-only/:read-write - 讀寫狀態

input:invalid {
  border-color: red;
}
checkbox:checked + label {
  font-weight: bold;
}

4. 鏈接偽類

專門用于超鏈接的狀態：

• :link - 未訪問的鏈接
• :visited - 已訪問的鏈接

a:link { color: blue; }
a:visited { color: purple; }

5. 其他特殊偽類

• :target - URL片段標識符匹配的元素
• :root - 文檔根元素（通常是html）
• :not(selector) - 反向選擇器
• :lang(language) - 根據語言屬性選擇
• :is()/:where() - 分組選擇器（CSS4）

:target {
  background: yellow;
}
article:not(.featured) {
  opacity: 0.8;
}

偽類的組合使用

偽類可以與其他選擇器組合使用：

/* 表格奇數行且懸停時 */
tr:nth-child(odd):hover {
  background: #e6f7ff;
}

/* 非第一個子元素的段落 */
p:not(:first-child) {
  margin-top: 1em;
}

瀏覽器兼容性注意事項

1. 新偽類（如:focus-visible）需要現代瀏覽器支持
2. 部分偽類（如:has()）仍處于實驗階段
3. 移動設備上:hover行為可能與桌面不同

可以使用@supports規則進行特性檢測：

@supports selector(:focus-visible) {
  button:focus-visible {
    outline: 3px solid blue;
  }
}

偽類的最佳實踐

1. 保持可訪問性：確保交互狀態有視覺反饋
2. 性能優化：避免在大型DOM樹上使用復雜偽類
3. 漸進增強：新偽類應作為增強體驗而非核心功能
4. 組合使用：:not()與結構偽類結合可創建強大選擇器

/* 好例子：清晰的視覺反饋 */
button:focus, button:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* 避免：可能影響性能 */
div :nth-child(3n+1) span:hover {
  /* 復雜選擇器 */
}

未來發展趨勢（CSS4）

1. :has() - 父選擇器（已部分支持）
2. :dir() - 文字方向選擇
3. :user-invalid - 用戶交互后的無效狀態
4. 增強的:nth-child()功能

/* 未來可能支持的語法 */
section:has(h2.special) {
  border: 1px solid gold;
}

總結表格

通過合理使用偽類，開發者可以創建更動態、響應式的界面，而無需增加HTML復雜度或依賴JavaScript。理解各種偽類的特性和瀏覽器支持情況，是成為CSS高手的重要一步。 “`

注：本文約1450字，全面介紹了HTML/CSS中的偽類分類、語法示例和實際應用技巧。如需調整字數或補充特定內容，可進一步擴展具體示例或瀏覽器兼容性細節。