【高频考点精讲】CSS伪类和伪元素完全指南：:hover、:before这些到底有什么区别？

CSS伪类和伪元素完全指南：:hover、:before这些到底有什么区别？

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 5 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

大家好，我是全栈老李。今天咱们来聊聊CSS中那些让人又爱又恨的伪类和伪元素，很多同学用了好几年CSS，可能还是分不清:hover和:before到底有什么区别。别急，今天老李就带大家彻底搞明白这个知识点。

伪类和伪元素到底是个啥？

想象一下，你正在参加一个化妆舞会。伪类就像是给已经存在的你（DOM元素）戴上不同的面具——比如"开心"面具、"生气"面具，而你的本质没变；伪元素则像是给你凭空变出一个伴舞者，这个伴舞者本来不存在，是CSS帮你创造出来的。

从技术角度说，伪类（Pseudo-class）用于选择元素的特定状态，而伪元素（Pseudo-element）则用于在元素中创建并样式化某些"虚拟"的部分。

伪类：元素的状态选择器

伪类以单冒号(:)开头，用来选择元素的特定状态。比如：

:hover - 鼠标悬停时的状态
:active - 元素被激活（比如点击）时的状态
:focus - 元素获得焦点时的状态
:nth-child() - 选择特定位置的子元素

/* 全栈老李提示：这是典型的伪类使用示例 */
button:hover {
   
   
  background-color: #4CAF50; /* 鼠标悬停时按钮变绿 */
  transform: scale(1.05);   /* 轻微放大效果 */
}

伪元素：元素的虚拟部分

伪元素以双冒号(::)开头（虽然单冒号也支持，但推荐用双冒号），用于创建并样式化元素的特定部分：

::before - 在元素内容前插入内容
::after - 在元素内容后插入内容
::first-letter - 选择元素的第一个字母
::selection - 选择用户选中的文本

/* 全栈老李提示：伪元素常用于装饰性内容 */
blockquote::before {
   
   
  content: "“";  /* 在引用前添加左引号 */
  font-size: 3em;
  color: #ccc;
}

为什么需要区分它们？

理解伪类和伪元素的区别很重要，因为：

选择的目标不同：伪类选择的是元素的某种状态，伪元素选择的是元素的某个部分
DOM表现不同：伪类不会影响DOM结构，伪元素会在DOM中创建虚拟节点
使用场景不同：伪类常用于交互反馈，伪元素常用于装饰性内容

真实代码示例

让我们看一个结合伪类和伪元素的完整例子：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全栈老李的CSS演示</title>
    <style>
        /* 伪类示例 */
        .fancy-button {
     
     
            padding: 12px 24px;
            background: linear-gradient(to right, #ff8a00, #da1b60);
            color: white;
            border