伪类和伪元素的区别和作用

一、核心区别对比表

特性	伪类（如 :hover）	伪元素（如 ::before）
定义	选择元素特定状态	创建虚拟元素
语法	单冒号（CSS3 后伪元素改用双冒号）	双冒号（CSS3 规范，兼容单冒号如 :before）
作用对象	整个元素（如链接的悬停状态）	元素的特定部分（如首行、内容前后）
DOM 结构	不修改 DOM	创建不在 DOM 中的虚拟节点

---

二、伪类（Pseudo-class）

作用：描述元素的特定状态或位置关系

常见伪类及示例：

1. 状态类

   a:hover { color: red; }       /* 鼠标悬停 */
   input:focus { border-color: blue; } /* 输入框聚焦 */
   :checked { background: green; }     /* 复选框选中 */
   

2. 位置类

   li:first-child { font-weight: bold; }  /* 第一个子元素 */
   li:nth-child(2n) { background: #eee; } /* 偶数行 */
   

3. 表单验证类

   input:valid { border-color: green; }  /* 输入有效 */
   input:invalid { border-color: red; }  /* 输入无效 */
   

---

三、伪元素（Pseudo-element）

作用：创建不在 DOM 中的虚拟元素，修饰特定内容

常见伪元素及示例：

1. 内容生成

   .tip::before { 
     content: "⚠️";  /* 必须设置 content */
     margin-right: 5px;
   }
   

2. 文本修饰

   p::first-line { font-weight: bold; }  /* 段落首行加粗 */
   ::selection { background: yellow; }   /* 选中文本高亮 */
   

3. 替代元素

   input::placeholder { color: #999; }  /* 修改占位符样式 */
   

---

四、组合使用场景

伪类 + 伪元素实现动态效果：

/* 鼠标悬停时在按钮后显示箭头 */
button:hover::after {
  content: "→";
  margin-left: 5px;
}

---

五、高频面试问题

1. 问：为什么伪元素需要 content 属性？
   答：content 是伪元素生效的必要条件，即使留空（content: ""）也必须声明。

2. 问：:before 和 ::before 的区别？
   答：CSS3 规范改用 :: 区分伪元素，但浏览器兼容单冒号写法，建议新代码用双冒号。

3. 问：如何用伪元素清除浮动？
   答：

   .clearfix::after {
     content: "";
     display: block;
     clear: both;
   }
   

---

六、记忆口诀

“伪类选状态（hover/focus/checked），伪元素造内容（before/after/first-line）；单冒号是类，双冒号是元素，内容生成必须带！”