CSS中伪类与伪元素的区别及用法详解

在CSS开发中，很多人容易混淆伪类和伪元素的概念，虽然它们都以冒号开头，但作用和使用场景有本质区别。本文会通过概念对比和具体代码示例，帮你清晰分辨两者的差异，掌握各自的使用方法。

一、核心概念与区别

要分辨伪类和伪元素，首先可以从定义和作用对象入手：

• 伪类（Pseudo-classes）：用于选择处于特定状态的元素，本质上是对已有元素的特定状态进行选中，不会创建新的元素。伪类通过单冒号:作为前缀标识。
• 伪元素（Pseudo-elements）：用于创建不在DOM树中的虚拟元素，本质上是生成了新的“虚假”元素，可以为其添加样式。伪元素通过双冒号::作为前缀标识（CSS3规范明确区分，旧版单冒号写法也兼容，但推荐双冒号）。

两者的核心差异可以总结为下表：

二、伪类的常见用法与示例代码

伪类主要用于匹配元素的特定状态，比如用户交互状态、元素在文档中的位置状态等。下面通过几个常见场景展示伪类的用法。

1. 用户交互类伪类

这类伪类会根据用户和元素的交互状态选中元素，最常见的就是:hover（鼠标悬停）、:focus（元素获得焦点）。

/* 鼠标悬停在按钮上时，修改背景色和文字颜色 */
.btn:hover {
  background-color: #409eff;
  color: #ffffff;
}

/* 输入框获得焦点时，修改边框颜色 */
.input-box:focus {
  border-color: #409eff;
  outline: none;
}

对应的HTML结构如下：

<button class="btn">悬停查看效果</button>
<input type="text" class="input-box" placeholder="点击获得焦点">

2. 结构类伪类

这类伪类会根据元素在DOM树中的位置选中元素，比如:nth-child()（选中第n个子元素）、:first-child（选中第一个子元素）。

/* 选中列表中的奇数项，设置浅灰背景 */
.list li:nth-child(odd) {
  background-color: #f5f5f5;
}

/* 选中列表的第一个子元素，加粗显示 */
.list li:first-child {
  font-weight: bold;
}

对应的HTML结构如下：

<ul class="list">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  <li>列表项4</li>
</ul>

三、伪元素的常见用法与示例代码

伪元素可以创建虚拟的元素，常用场景包括为元素添加装饰性内容、选中元素的特定部分设置样式。

1. ::before 和 ::after 伪元素

这两个伪元素会在选中元素的内容前后插入虚拟的内容，需要通过content属性定义插入的内容（即使是空内容也要写content: ''）。

/* 为链接后面添加一个小箭头装饰 */
.link::after {
  content: '→';
  margin-left: 4px;
  color: #409eff;
}

/* 为卡片元素前面添加一个装饰性色块 */
.card::before {
  content: '';
  display: block;
  width: 4px;
  height: 20px;
  background-color: #409eff;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

对应的HTML结构如下：

<a href="http://ipipp.com" class="link">跳转到示例站</a>
<div class="card" style="position: relative; padding-left: 10px;">
  这是一个卡片内容
</div>

2. 文本类伪元素

这类伪元素可以选中元素的特定文本部分设置样式，比如::first-line（选中元素的第一行文本）、::first-letter（选中元素的第一个字符）。

/* 选中段落的第一行文本，设置为蓝色加粗 */
.text-box::first-line {
  color: #409eff;
  font-weight: bold;
}

/* 选中段落的第一个字符，放大字号 */
.text-box::first-letter {
  font-size: 24px;
  float: left;
  margin-right: 4px;
}

对应的HTML结构如下：

<p class="text-box">
  这是一段测试文本，用于展示伪元素对文本部分样式的控制效果。当这段文本足够长的时候，第一行会显示不同的样式，第一个字符也会有特殊的放大效果。
</p>

四、记忆与区分小技巧

如果还是容易混淆，可以通过以下两个简单方法快速分辨：

• 看前缀：单冒号:是伪类，双冒号::是伪元素，这是最直观的标识。
• 想作用：如果是给已有元素加状态（比如悬停、获得焦点、是第几个子元素），就是伪类；如果是要加新内容、选文本部分，就是伪元素。

实际开发中只要多练习几次，就能快速准确地区分两者的使用场景，写出更规范的CSS代码。

CSS伪类伪元素:hover::before选择器