伪类和伪元素的区别

一、核心区别

维度	伪类	伪元素
作用	选择元素的特定状态或逻辑位置。	选择元素的某个部分（如首字母）或创建虚拟元素。
语法	单个冒号 :（如 :hover、:nth-child）。	双冒号 ::（如 ::before、::first-letter，::selection - 作用：选择用户选中（高亮）的文本。）。
影响范围	不创建新元素，仅选择已有元素。	创建虚拟元素（DOM 中不可见，但可样式化）。
数量限制	一个选择器可使用多个伪类（如 a:hover:active）。	一个选择器最多使用一个伪元素，且需位于最后（如 p::first-line::before 无效）。

二、常见伪类示例

1. 状态伪类

• :hover：鼠标悬停时的元素。
• :active：被激活（如点击）的元素。
• :focus：获得焦点的表单元素。
  示例：

css

button:hover { background-color: #e74c3c; }
input:focus { border-color: #3498db; }

2. 结构伪类

• :nth-child(n)：匹配父元素的第 n 个子元素。
• :first-child：第一个子元素。
• :last-child：最后一个子元素。
  示例：

css

li:nth-child(even) { background-color: #f0f0f0; }

三、常见伪元素示例

1. 内容插入伪元素

• ::before 和 ::after：在元素前 / 后插入内容（需配合 content 属性）。
  示例：

blockquote::before {
  content: "“";
  font-size: 2em;
}

2. 文本部分选择

• ::first-letter：选择首字母。

• ::first-line：选择首行。
  示例：

p::first-letter {
  font-size: 2em;
  float: left;
}