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