CSS伪类与伪元素

### 伪类与伪元素

伪类（Pseudo-classes）和伪元素（Pseudo-elements）是 CSS 中用于选择特定状态或元素部分的特殊选择器。它们在增强交互性和页面布局方面非常强大。以下是伪类和伪元素的基本概念、常见类型以及应用案例。

------

#### 1. 伪类（Pseudo-classes）

伪类用于选择元素的特定状态或位置，以实现动态样式效果。伪类以冒号（`:`）开头。

##### （1）`:hover`

- **作用**：选择鼠标悬停在元素上的状态。

- **示例**：

css复制

```css
  a:hover {
      color: red; /* 鼠标悬停时，链接变为红色 */
  }
  ```

##### （2）`:active`

- **作用**：选择元素被激活（如点击）时的状态。

- **示例**：

css复制

```css
  button:active {
      background-color: blue; /* 按钮被点击时背景变蓝 */
  }
  ```

##### （3）`:focus`

- **作用**：选择元素获得焦点时的状态（如输入框）。

- **示例**：

css复制

```css
  input:focus {
      border: 2px solid green; /* 输入框获得焦点时边框变绿 */
  }
  ```

##### （4）`:first-child` 和 `:last-child`

- **作用**：选择父元素的第一个或最后一个子元素。

- **示例**：

css复制

```css
  li:first-child {
      font-weight: bold; /* 列表的第一个子项加粗 */
  }
  li:last-child {
      color: red; /* 列表的最后一个子项变红 */
  }
  ```

##### （5）`:nth-child(n)` 和 `:nth-last-child(n)`

- **作用**：选择父元素的第 `n` 个子元素或倒数第 `n` 个子元素。

- **示例**：

css复制

```css
  li:nth-child(2) {
      color: blue; /* 列表的第二个子项变蓝 */
  }
  li:nth-last-child(2) {
      color: green; /* 列表倒数第二个子项变绿 */
  }
  ```

##### （6）`:not(selector)`

- **作用**：选择不符合指定选择器的元素。

- **示例**：

css复制

```css
  p:not(.warning) {
      color: black; /* 不是.warning类的段落文本为黑色 */
  }
  ```

##### （7）`:checked`

- **作用**：选择被选中的表单元素（如单选按钮或复选框）。

- **示例**：

css复制

```css
  input[type="checkbox"]:checked {
      background-color: green; /* 被选中的复选框背景变绿 */
  }
  ```

------

#### 2. 伪元素（Pseudo-elements）

伪元素用于选择元素的特定部分（如元素的前后内容或第一行文本）。伪元素以双冒号（`::`）开头。

##### （1）`::before`

- **作用**：在元素的内容之前插入生成的内容。

- **示例**：

css复制

```css
  p::before {
      content: ">> "; /* 在段落内容前插入文本 */
      color: red;
  }
  ```

##### （2）`::after`

- **作用**：在元素的内容之后插入生成的内容。

- **示例**：

css复制

```css
  p::after {
      content: " <<"; /* 在段落内容后插入文本 */
      color: blue;
  }
  ```

##### （3）`::first-line`

- **作用**：选择元素的第一行文本。

- **示例**：

css复制

```css
  p::first-line {
      font-weight: bold; /* 段落的第一行文本加粗 */
  }
  ```

##### （4）`::first-letter`

- **作用**：选择元素的第一个字母。

- **示例**：

css复制

```css
  p::first-letter {
      font-size: 2em; /* 段落的第一个字母放大 */
      color: green;
  }
  ```

##### （5）`::selection`

- **作用**：选择用户选中的文本。

- **示例**：

css复制

```css
  p::selection {
      background: yellow; /* 选中的文本背景变黄 */
      color: black;
  }
  ```

------

#### 3. 常见应用案例

##### （1）按钮交互效果

css复制

```css
button {
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3; /* 鼠标悬停时背景变暗 */
}

button:active {
    background-color: #003d82; /* 按钮被点击时背景更深 */
}
```

##### （2）列表高亮

css复制

```css
ul li {
    padding: 5px;
}

ul li:hover {
    background-color: #f0f0f0; /* 鼠标悬停时背景变灰 */
}
```

##### （3）输入框焦点样式

css复制

```css
input[type="text"] {
    border: 2px solid #ccc;
    padding: 5px;
}

input[type="text"]:focus {
    border-color: #007BFF; /* 输入框获得焦点时边框变蓝 */
}
```

##### （4）生成内容

css复制

```css
blockquote::before {
    content: "“"; /* 引用前插入左引号 */
    font-size: 2em;
    color: #888;
}

blockquote::after {
    content: "”"; /* 引用后插入右引号 */
    font-size: 2em;
    color: #888;
}
```

##### （5）清除浮动

css复制

```css
.container::after {
    content: "";
    display: block;
    clear: both; /* 清除浮动 */
}
```

##### （6）自定义表单样式

css复制

```css
input[type="checkbox"] {
    display: none; /* 隐藏原生复选框 */
}

input[type="checkbox"] + label::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    margin-right: 5px;
}

input[type="checkbox"]:checked + label::before {
    background-color: #007BFF; /* 被选中时背景变蓝 */
}
```

------

#### 4. 总结

- **伪类**：
  - 用于选择元素的特定状态（如 `:hover`、`:active`、`:focus`）。
  - 用于选择特定位置的元素（如 `:first-child`、`:nth-child`）。
- **伪元素**：
  - 用于选择元素的特定部分（如 `::before`、`::after`）。
  - 常用于生成内容、装饰性效果或实现特殊布局。

通过合理使用伪类和伪元素，可以增强页面的交互性和视觉效果，同时减少 HTML 的冗余。