CSS 伪类与伪元素：深度解析

在前端开发中，CSS 伪类和伪元素是两个强大的工具，它们能让你在不改动 HTML 结构的情况下，为元素添加复杂的样式和动态效果。它们就像 CSS 的"超能力"，让你的网页更具交互性和表现力。本文将带你深入了解它们的概念和用法，并通过代码案例让你彻底掌握。

一、伪类 (Pseudo-classes)

伪类是附加在选择器上的关键字，用于选择处于特定状态或位置的元素。它们的语法是一个冒号 (: )。

这些伪类根据用户的交互行为来改变元素样式，是提升用户体验的关键。

:active : 选中元素被激活时的状态，通常是鼠标点击或按住时。
- 案例: 鼠标点击按钮时，让按钮背景变暗。
css 复制代码
```
button:active {
  background-color: darkgray;
  transform: translateY(1px);
}
```
:hover : 选中鼠标悬停在元素上时的状态。
- 案例: 鼠标移入链接时，改变链接颜色。
css 复制代码
```
a:hover {
  color: crimson;
}
```
:focus : 选中元素获得焦点时的状态，常用于表单输入框。
- 案例: 用户点击输入框时，添加高亮边框。
css 复制代码
```
input:focus {
  outline: 2px solid deepskyblue;
}
```
:focus-within : 选中当元素本身或其任何后代元素获得焦点时的状态。
- 案例: 当表单内的任意输入框被选中时，整个表单添加边框。
css 复制代码
```
form:focus-within {
  border: 2px solid lightgreen;
}
```

这些伪类专门用于根据表单元素的不同状态来添加样式，帮助用户进行输入校验。

:enabled: 选中当前可用的表单元素。
:disabled : 选中当前禁用的表单元素。
- 案例: 让被禁用的输入框呈现灰色，并改变光标样式。
css 复制代码
```
input:disabled {
  background-color: lightgray;
  cursor: not-allowed;
}
```
:checked : 选中已被勾选的复选框或单选按钮。
- 案例: 选中复选框后，改变其背景颜色。
css 复制代码
```
input[type="checkbox"]:checked {
  background-color: blue;
}
```
:valid & :invalid : 选中输入内容有效或无效的表单元素。
- 案例: 根据输入是否为有效邮箱，改变边框颜色。
css 复制代码
```
input[type="email"]:valid {
  border-color: green;
}
input[type="email"]:invalid {
  border-color: red;
}
```
:required & :optional : 选中带有 required 属性或不带该属性的输入元素。
- 案例: 为必填项添加一个特殊的背景色。
css 复制代码
```
input:required {
  background-color: #fff9e6;
}
```
:autofill: 选中被浏览器自动填充的输入框。
:in-range & :out-of-range: 选中值在指定范围之内或之外的输入元素。

这些伪类根据链接的访问历史或 URL 片段来定位和样式化元素。

:any-link : 选中所有带有 href 属性的链接，无论是否被访问过。
:link: 选中所有未被访问过的链接。
:visited : 选中用户已经访问过的链接。
- 案例: 为访问过的链接设置不同的颜色，帮助用户区分。
css 复制代码
```
a:visited {
  color: #8a2be2; /* 紫色 */
}
```
:target : 选中 URL 锚点所指向的元素。
- 案例: 当用户点击导航链接跳转到某个章节时，高亮该章节。
html 复制代码
```
<a href="#intro">跳到引言</a>
<div id="intro">...</div>
```
css 复制代码
```
/* CSS */
#intro:target {
  background-color: lightyellow;
}
```
:local-link & :target-within: 这些是较新的伪类，用于定位指向同一文档的链接或其子元素。

这些伪类根据元素在 HTML 文档树中的位置来选择它们，是构建灵活布局的利器。

:root : 选中文档的根元素，通常是 <html>。
:empty : 选中不包含任何子元素（包括文本和空格）的元素。
- 案例: 隐藏空的警告信息容器。
css 复制代码
```
.alert-box:empty {
  display: none;
}
```
:nth-child(n) & :nth-last-child(n): 根据位置选择元素。
:first-child & :last-child: 选中父元素下的第一个或最后一个子元素。
:only-child : 选中父元素下唯一的子元素。
- 案例: 为唯一的列表项添加特殊样式。
css 复制代码
```
li:only-child {
  font-weight: bold;
}
```
:first-of-type & :last-of-type : 选中父元素下同类型元素 的第一个或最后一个。
- 案例 : 选中每个 section 中的第一个段落。
css 复制代码
```
section p:first-of-type {
  text-indent: 2rem;
}
```
:nth-of-type(n) & :only-of-type: 根据同类型元素的位置进行选择。

这些伪类接受参数，允许你进行更复杂的条件选择。

:is() & :where() : 这两个伪类都接受一个选择器列表，并选中匹配其中任意一个的元素。:where() 的特异性为零，非常适合用于样式重置。
- 案例: 简化复杂选择器。
css 复制代码
```
/* 传统写法 */
section h1, article h1, aside h1 {
  font-size: 2rem;
}
/* 使用 :is() */
:is(section, article, aside) h1 {
  font-size: 2rem;
}
```
:has() : 俗称"父选择器"，选中包含特定子元素的父元素。
- 案例: 只有当卡片包含图片时，才为其添加阴影。
css 复制代码
```
.card:has(img) {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
```
:not() : 选中不匹配给定选择器的所有元素。
- 案例 : 为除了 .primary 类之外的所有按钮设置灰色背景。
css 复制代码
```
button:not(.primary) {
  background-color: gray;
}
```

伪元素是虚拟的、不存在于 HTML 中的元素，用于对元素中的特定部分进行样式设置，或在其前后插入内容。它们的语法是两个冒号 (::)。

::before & ::after : 在元素内容的前面或后面插入内容。它们必须和 content 属性一起使用。
- 案例: 在链接前添加一个图标。
css 复制代码
```
a::before {
  content: "➡️";
  margin-right: 5px;
}
```
::first-letter : 选中元素文本内容的第一个字母。
- 案例: 为段落首字母创建"大写首字下沉"效果。
css 复制代码
```
p::first-letter {
  font-size: 3rem;
  color: blue;
}
```
::marker : 选中列表项的标记（如项目符号或编号）。
- 案例: 改变列表标记的颜色。
css 复制代码
```
li::marker {
  color: green;
}
```
::placeholder: 选中表单输入框的占位符文本。
::selection: 选中用户用鼠标高亮选择的文本。

掌握了这些伪类和伪元素，你就能用 CSS 创造出更加动态和丰富的网页体验，让你的代码更简洁、更强大。