伪类选择器

CSS中的伪类选择器（Pseudo-classes）是用来选择具有特定状态的元素。这些状态包括鼠标悬停、获取焦点、表单状态等。伪类选择器通过冒号(:)来定义，并且它们可以与普通的选择器结合使用。

以下是一些常用的伪类选择器：

1. `:hover`
   - 当鼠标悬停在元素上时，该元素会被选中。

2. `:active`
   - 当元素被用户激活（例如，按下按钮或点击链接）时，该元素会被选中。

3. `:focus`
   - 当元素获得焦点（例如，输入框被选中）时，该元素会被选中。

4. `:visited`
   - 当用户访问过链接的URL时，该链接会被选中。

5. `:link`
   - 当链接未被访问时，该链接会被选中。

6. `:checked`
   - 当元素（如复选框或单选按钮）被选中时，该元素会被选中。

7. `:disabled`
   - 当元素被禁用时（例如，禁用的按钮或输入框），该元素会被选中。

8. `:required`
   - 当元素是必填项时，该元素会被选中。

9. `:valid`
   - 当元素的值有效时（例如，格式正确的电子邮件地址），该元素会被选中。

10. `:invalid`
    - 当元素的值无效时（例如，格式错误的电子邮件地址），该元素会被选中。

下面是一个简单的HTML和CSS示例，演示了如何使用伪类选择器：

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器示例</title>
<style>
  /* 鼠标悬停样式 */
  a:hover {
    color: blue;
    text-decoration: underline;
  }
  
  /* 获取焦点样式 */
  input:focus {
    background-color: #f4f4f4;
  }
  
  /* 已访问链接样式 */
  a:visited {
    color: purple;
  }
  
  /* 未访问链接样式 */
  a:link {
    color: red;
  }
</style>
</head>
<body>

</body>
</html>
```

在这个例子中，当鼠标悬停在链接上时，链接的颜色会变成蓝色并添加下划线；当输入框获得焦点时，背景颜色会变成浅灰色；已访问的链接颜色会变成紫色；未访问的链接颜色会变成红色。

伪类选择器非常强大，它们允许你根据元素的状态来动态地改变其外观，从而提供更好的用户体验。

伪类选择器

目录