CSS 中的伪类与伪元素有什么区别？

伪类和伪元素均为CSS选择器的扩展机制，核心区别在于操作对象和行为：

1. 本质区别：
   • 伪类（Pseudo-classes）
     • 选择特定状态或关系的已有元素（如：hover选择鼠标悬停时的元素）。
     • 行为等价于添加一个虚拟类（例如 .hover {} ≈ ：hover {}），无需创建新元素。
     • 示例：动态状态（:hover、:active）、结构关系（:first-child）、表单状态（:checked）。
   • 伪元素（Pseudo-elements）
     • 创建或选择元素内部分内容（如::first-letter选择首字母），或插入不存在于DOM的新内容（如::before生成内容）。
     • 行为等价于添加一个新的虚拟元素（例如需额外标签包装内容）。
     • 示例：::before、::after、::first-line。
2. 语法区别：
   • CSS3规范推荐：
     • 伪类用单冒号（:active）。
     • 伪元素用双冒号（::before）。
   • 兼容性例外：部分旧浏览器也支持伪元素的单冒号语法（如 :before）。
3. 实际示例对比：

   /* 伪类：操作元素状态 */
   a:hover { 
     color: red;  /* 鼠标悬停时改变链接颜色 */
   }
      
   /* 伪元素：创建内容片段 */
   p::first-letter { 
     font-size: 2em;  /* 创建段落首字母样式 */
   }
   .quote::before {   
     content: "“";    /* 插入引号（在DOM外生成内容） */
   }
   

4. 应用场景：
   • 伪类：响应交互状态、过滤文档结构（如列表首项样式）。
   • 伪元素：装饰性内容（图标、分隔线）、文本片段控制（首行缩进）。

核心总结：

• 伪类 = 选择符合条件的元素（不改变DOM结构）。
• 伪元素 = 生成新内容或选择元素部分（生成虚拟元素或修改内容片段）。