CSS伪类和伪元素的区别与应用

一、基本概念
伪类（Pseudo-class）和伪元素（Pseudo-element）都是CSS选择器的扩展，但它们的用途和语法有本质区别。

二、伪类的详细解析

1. 定义
   伪类用于选择处于特定状态的元素（如悬停、焦点、第一个子元素等），它基于文档树的现有元素状态。

2. 语法特征
   使用单冒号:（CSS3规范允许伪类使用单冒号或双冒号，但为保持兼容性通常用单冒号）。

3. 常见伪类示例

   • 动态交互类：:hover（悬停）、:active（激活）、:focus（聚焦）
   • 结构关系类：:first-child（第一个子元素）、:nth-child(n)（第n个子元素）
   • 表单相关类：:checked（选中状态）、:disabled（禁用状态）

4. 代码演示

   /* 链接悬停时变红色 */
   a:hover { color: red; }
   
   /* 表格奇数行背景色 */
   tr:nth-child(odd) { background: #f0f0f0; }
   

三、伪元素的详细解析

1. 定义
   伪元素用于创建不在文档树中的抽象元素（如首字母、前后装饰内容），它相当于在原有元素基础上插入虚拟元素。

2. 语法演变
   CSS3规范明确规定伪元素使用双冒号::（如::before），但早期单冒号写法仍被浏览器兼容。

3. 常见伪元素示例

   • ::before/::after：在元素内容前/后插入内容
   • ::first-letter：选择首字母
   • ::selection：选择被用户高亮的部分

4. 代码演示

   /* 给段落前加装饰线 */
   p::before {
     content: "→";
     margin-right: 5px;
   }
   
   /* 首字母下沉效果 */
   p::first-letter {
     font-size: 2em;
     float: left;
   }
   

四、核心区别对比

1. 本质差异

   • 伪类选择已存在的特定状态元素
   • 伪元素创建并选择不存在的虚拟元素

2. 语法标准

   • 伪类推荐使用:
   • 伪元素推荐使用::

3. DOM结构表现

   • 伪类不影响DOM结构
   • 伪元素可通过开发者工具看到（但不在HTML源码中）

五、综合应用案例

/* 给每个列表项添加自定义序号 */
li::before {
  content: counter(list) ".";
  counter-increment: list;
  color: blue;
}

/* 鼠标悬停时改变序号颜色 */
li:hover::before {
  color: red;
}

六、易错点提醒

1. 伪元素必须配合content属性使用（除::selection等少数特殊情况）
2. 伪类可链式使用（如a:hover:focus），伪元素通常只能出现在选择器最后
3. 早期浏览器可能不支持双冒号语法，需根据兼容需求选择写法