伪类link,hover,active,visited,focus的区别

封面图 • 2025-10-23 • Html/Css

在 CSS 中，伪类（pseudo-classes）用于选择 HTML 元素的特定状态。常见的伪类包括 `:link`、`:hover`、`:active`、`:visited` 和 `:focus`。它们各自有不同的用途和适用对象，下面是对它们的详细区别：

---

### 1. `:link`
- **作用**：选择未被访问过的超链接（即用户尚未点击过的链接）。
- **适用对象**：`<a>` 标签（锚点元素），且仅当该链接没有被访问过时才生效。
- **示例**：
  ```css
  a:link {
    color: blue;
  }
  ```

> ⚠️ 注意：`:link` 只对 `<a>` 元素有效，不能用于其他元素。

---

### 2. `:visited`
- **作用**：选择用户已经访问过的超链接。
- **适用对象**：同样只适用于 `<a>` 标签。
- **限制**：出于隐私保护的原因，`:visited` 的样式只能有限地使用（例如不能设置 `background-image` 或 `opacity`）。
- **示例**：
  ```css
  a:visited {
    color: purple;
  }
  ```

> ⚠️ 浏览器可能会限制某些样式属性以防止跟踪用户行为。

---

### 3. `:hover`
- **作用**：当鼠标悬停在元素上时应用样式。
- **适用对象**：几乎任何元素（如按钮、链接、图片等）。
- **示例**：
  ```css
  button:hover {
    background-color: lightblue;
  }
  ```

> 这是网页交互中非常常用的一个伪类。

---

### 4. `:active`
- **作用**：当用户“激活”元素时（通常是点击或按压）应用样式。
- **适用对象**：可以是任何可点击的元素（如按钮、链接、表单控件等）。
- **示例**：
  ```css
  a:active {
    color: red;
  }
  ```

> 通常用于表示当前正在被操作的元素。

---

### 5. `:focus`
- **作用**：当元素获得焦点时应用样式（比如通过键盘导航或点击）。
- **适用对象**：表单元素（如 `<input>`、`<textarea>`、`<button>`）、可聚焦的元素（如 `<a>` 在某些情况下也可以获得焦点）。
- **示例**：
  ```css
  input:focus {
    border: 2px solid green;
  }
  ```

> 常用于提升可访问性，帮助用户知道当前输入的位置。

---

### 总结对比表格

| 伪类     | 适用对象       | 触发条件                   | 说明                         |
|----------|----------------|----------------------------|------------------------------|
| `:link`  | `<a>`          | 链接未被访问               | 仅用于未访问的链接           |
| `:visited` | `<a>`        | 链接已被访问               | 受浏览器隐私限制             |
| `:hover` | 任何元素       | 鼠标悬停在元素上           | 常用于交互效果               |
| `:active`| 任何可点击元素 | 用户点击或按下元素         | 表示当前正在操作的元素       |
| `:focus` | 可聚焦元素     | 元素获得焦点（键盘/点击）  | 提升可访问性和用户体验       |

---

如果你有具体的使用场景或想了解如何组合这些伪类来实现某种效果，欢迎继续提问！