伪类与伪元素

约 1248 字大约 4 分钟

2025-08-16

一、前言

在 CSS 开发中，伪类和伪元素是极其强大的工具，它们让我们能够针对元素的特定状态或内容部分应用样式，而无需修改 HTML 结构

二、伪类选择器

伪类选择器用于选择元素的特定状态或特定位置，它以冒号 : 开头。

2.1 动态伪类（最常用）

这些伪类基于用户与元素的交互状态应用样式：

/* 鼠标悬停时 */
a:hover {
  color: #0066cc;
  text-decoration: underline;
}

/* 获得焦点时（常用于表单元素） */
input:focus {
  border-color: #0066cc;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.3);
}

/* 点击时（鼠标按下但未释放） */
button:active {
  transform: translateY(1px);
  background-color: #0055aa;
}

最佳实践：

顺序很重要：:link → :visited → :hover → :focus → :active（LVHFA 规则）
使用 :focus 提高可访问性，不要完全移除默认的 focus 样式
对于按钮和链接，提供视觉反馈增强用户体验

2.2 结构伪类（最常用）

这些伪类基于元素在 DOM 树中的位置应用样式：

/* 第一个子元素 */
li:first-child {
  margin-left: 0;
}

/* 最后一个子元素 */
li:last-child {
  margin-right: 0;
}

/* 奇数行（斑马条纹） */
tr:nth-child(odd) {
  background-color: #f9f9f9;
}

/* 偶数行 */
tr:nth-child(even) {
  background-color: #ffffff;
}

/* 第 2、5、8... 个元素（每 3 个中的第 2 个） */
.item:nth-child(3n+2) {
  background-color: #e6f7ff;
}

/* 选择指定类型的第一个元素 */
p:first-of-type {
  text-indent: 2em;
}

常用公式：

:nth-child(n)：选择所有子元素中的第 n 个
:nth-child(odd) / :nth-child(even)：选择奇数/偶数位置的元素
:nth-child(an+b)：选择符合公式 an+b 的元素（a 是周期，b 是偏移量）
- 3n+1：1, 4, 7, 10...
- 2n：2, 4, 6, 8... (等同于 even)

2.3 表单伪类（最常用）

这些伪类专门用于表单元素的状态：

/* 选中的单选/复选框 */
input[type="checkbox"]:checked + label {
  color: #0066cc;
  font-weight: bold;
}

/* 禁用的表单元素 */
input:disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

/* 有效的表单元素（HTML5验证） */
input:valid {
  border-color: #4CAF50;
}

/* 无效的表单元素 */
input:invalid {
  border-color: #f44336;
}

实用技巧：

使用 :checked 可以创建纯 CSS 的开关、手风琴菜单等交互效果
结合 + 选择器可以样式化紧随其后的兄弟元素（如 label）

三、伪元素

伪元素用于选择元素的特定部分，它以双冒号 :: 开头（单冒号 : 也兼容，但双冒号是 CSS3 标准）。

3.1 ::before 和 ::after（最常用）

这两个伪元素用于在元素内容前后插入生成的内容：

/* 添加图标 */
.button::before {
  content: "★";
  margin-right: 5px;
  color: gold;
}

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

/* 引用标记 */
blockquote::before {
  content: open-quote;
  font-size: 2em;
  color: #ccc;
}

blockquote::after {
  content: close-quote;
  font-size: 2em;
  color: #ccc;
}

关键点：

必须包含 content 属性（即使为空 content: "";）
默认是行内元素，可通过 display 改变
可以应用几乎所有 CSS 属性
常用于装饰性内容、清除浮动、生成引号等

3.2 ::first-letter 和 ::first-line（最常用）

这两个伪元素用于选择文本的特定部分：

/* 首字母下沉效果 */
p::first-letter {
  font-size: 2.5em;
  float: left;
  margin-right: 5px;
  color: #0066cc;
  line-height: 0.8;
}

/* 首行样式 */
p::first-line {
  font-weight: bold;
  color: #666;
}

限制：

只能应用于块级元素
只能应用有限的 CSS 属性（如字体、颜色等）
不能与 :hover 等伪类结合使用

四、伪类与伪元素对比

特性	伪类	伪元素
语法	单冒号 `:hover`	双冒号 `::before` (CSS3 标准)
作用	选择元素的特定状态或位置	选择元素的特定部分
常见例子	`:hover`, `:first-child`, `:nth-child()`	`::before`, `::after`, `::first-letter`
是否创建新元素	否	是（生成的虚拟元素）
必须属性	无	`::before`/`::after` 必须有 `content`

五、实用技巧与最佳实践

5.1 伪类组合使用

/* 仅当鼠标悬停在已访问的链接上时 */
a:visited:hover {
  color: #6600cc;
}

/* 选中的复选框且获得焦点时 */
input[type="checkbox"]:checked:focus {
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.5);
}

5.2 伪元素实用技巧

/* 纯CSS三角形 */
.arrow::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid currentColor;
  margin-left: 5px;
  vertical-align: middle;
}

/* 悬停显示提示 */
.tooltip {
  position: relative;
}

.tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  margin-bottom: 5px;
}

5.3 常见陷阱与解决方案

伪元素不显示：
- 检查是否遗漏了 content 属性
- 确保元素有布局（尝试添加 position 或 display）
伪类顺序问题：
- 遵循 LVHFA 顺序（:link → :visited → :hover → :focus → :active）
- 使用 :focus-visible 区分键盘和鼠标焦点
性能考虑：
- 避免过度使用复杂的 :nth-child 表达式
- 不要在大量元素上使用 :hover 触发动画