在CSS中，伪类（pseudo-classes）和伪元素（pseudo-elements）是用来选择文档中不同状态或特定部分的技术。它们的作用是为了能够更精确地选择文档中的某些部分，以便对其应用样式或效果。

伪类（pseudo-classes）:

• 伪类用于描述元素的特定状态，比如鼠标悬停、被点击、被选中等。
• 伪类以冒号（:）开头，例如:hover、:active、:checked。
• 伪类是应用到已有文档树中的元素的特殊状态，比如链接的不同状态、复选框的选中状态等。

  a:link { /* 未访问的链接样式 */ }
  a:hover { /* 鼠标悬停时的链接样式 */ }
  input:checked { /* 选中状态的输入框样式 */ }

  伪元素（pseudo-elements）:

• 伪元素用于创建一些元素的虚拟子元素，以便可以对其应用样式。
• 伪元素以双冒号（::）开头，例如::before、::after。
• 伪元素允许我们在元素的内容前后插入额外的样式，而不需要在HTML中添加额外的元素。

p::first-line { /* 段落的第一行样式 */ }
p::first-letter { /* 段落中第一个字母的样式 */ }
div::before { /* 在div元素内容前插入的内容样式 */ }

区别:

1. 伪类用于选择元素的特定状态，而伪元素用于创建元素的虚拟子元素。
2. 伪类以冒号（:）开头，而伪元素以双冒号（::）开头。
3. 伪类是选择已有文档中的元素的特定状态，而伪元素是创建一个元素的虚拟子元素。