前端 伪类和伪元素的区别

在CSS中，“伪类”和“伪元素”虽然都是用来增加额外的功能，但是它们的作用和用法是不同的。

伪类 (Pseudo-classes)

伪类是用来描述元素的某种状态，而不是页面文档树的一部分。它们通常用于改变链接的状态、用户选择的文本、用户交互的状态等。

示例：

• :hover：当用户将鼠标悬停在一个元素上时应用样式。
• :active：当一个元素被用户激活（如按下）时应用样式。
• :focus：当一个元素获得焦点（通常是通过键盘导航）时应用样式。
• :visited：当一个链接已经被用户访问过时应用样式。
• :checked：当一个元素被选中（如单选按钮或复选框）时应用样式。
• :nth-child(n)：选择属于其父元素的第n个子元素。
• :not(selector)：选择不属于特定选择器的元素。

伪元素 (Pseudo-elements)

伪元素用来选择不是文档树一部分的元素的部分，可以用来添加装饰效果，如首字下沉或插入内容到元素前后。

示例：

• ::before：在元素的内容之前插入内容。
• ::after：在元素的内容之后插入内容。
• ::first-letter：选择元素的第一个字母。
• ::first-line：选择元素的第一行文本。
• ::selection：选择用户选取的文本。

使用示例

假设我们要给一个段落的首字母加上红色阴影，并且当鼠标悬停在段落上时改变段落的背景色，可以这样做：

p {
  /* 更改段落悬停时的背景色 */
  background-color: white;
}

p:hover {
  /* 鼠标悬停时改变背景