CSS中的伪类（Pseudo-classes）和伪元素（Pseudo-elements）是两个不同的概念，它们的主要区别在于它们的作用和目标。

伪类（Pseudo-classes）

伪类用于选择处于特定状态的元素。这些状态并不是由HTML直接定义的，而是由CSS来定义的。伪类最常见的用途是改变用户与元素交互时的样式，例如鼠标悬停（:hover）、活动状态（:active）、已访问链接（:visited）等。

一些常见的伪类包括：

• :hover：用户鼠标悬停在元素上时的样式。
• :active：元素被用户激活（如鼠标点击但尚未释放）时的样式。
• :visited：用户已访问的链接的样式。
• :focus：元素获得焦点时的样式（如通过点击或Tab键）。
• :first-child、:last-child、:nth-child()：选择特定位置的子元素。
• :checked：用于选择被选中的<input type="checkbox">或<input type="radio">元素。

伪元素（Pseudo-elements）

伪元素用于选择元素的特定部分或创建元素的抽象部分。这些部分并不是实际的HTML元素，而是由CSS创建的虚拟元素。最常见的伪元素是::before和::after，它们允许你在元素的内容之前或之后插入内容。

一些常见的伪元素包括：

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

主要区别

1. 用途：伪类用于选择元素的特定状态，而伪元素用于选择元素的特定部分或创建虚拟元素。
2. 内容：伪类不添加新的内容到文档中，它们只是基于元素的当前状态改变样式。伪元素可以向文档中添加新的内容。
3. 数量：伪类可以有多个元素匹配（例如，多个链接可以被:visited伪类选中），而伪元素通常只应用于一个元素（例如，一个元素只能有一个::before和一个::after）。
4. 语法：在CSS3中，伪元素的双冒号（::）语法被引入以区分伪类和伪元素。虽然很多浏览器仍然接受单冒号（:）语法用于伪元素，但使用双冒号（::）是更规范的做法。