伪类和伪元素都有哪些 有什么区别

CSS中的伪类和伪元素都是用来选择DOM树中的某些部分的

伪类主要用来选择DOM树中的元素基于它们的特定状态。例如：
:hover：当鼠标悬停在元素上时，选择该元素。
:active：当元素被激活时（例如，被鼠标点击或键盘回车），选择该元素。
:focus：当元素获得焦点时，选择该元素。
:checked：对于复选框或单选按钮，当它们被选中时，选择该元素。
:nth-child(n)：选择其父元素的第n个子元素。

伪元素则用来选择DOM树中的某些部分，这些部分并不是实际的DOM元素。例如：
::before：创建一个伪元素，它是其所在元素的第一个子元素。通常用于在元素内容前插入内容。
::after：创建一个伪元素，它是其所在元素的最后一个子元素。通常用于在元素内容后插入内容。
::first-letter：选择块级元素的第一个字母。
::first-line：选择块级元素的第一行。

主要区别：

伪类用于选择元素的特定状态，而伪元素用于创建DOM树中实际不存在的元素。
伪类使用单冒号语法（例如 :hover），而伪元素使用双冒号语法（例如 ::before）。但是，为了向后兼容，一些旧的伪元素（如 :before，:after）仍然可以使用单冒号语法。
一个元素可以有多个伪类，但只能有一个 ::before 和一个 ::after 伪元素。