什么是伪类和伪元素
伪类
伪类（Pseudo-classes）是用来选择 DOM 树之外的信息，或者是无法被常规 CSS 选择器选择的信息。这些可能是元素的特殊状态，或者是根据元素的结构信息（例如：第一个子元素）而选择的元素。伪类使用冒号 :来表达，例如：:hover, :first-child, :nth-child(3)等。
一些常见的伪类包括：
:hover：鼠标悬停在元素上的状态:active：元素被激活的状态，如被鼠标按下:focus：元素获得焦点的状态:first-child：选中父元素的第一个子元素:last-child：选中父元素的最后一个子元素:nth-child(n)：选中父元素的第 n 个子元素
伪元素
伪元素（Pseudo-elements）允许你选择并样式化元素的一部分。它们允许你向元素添加特殊效果，或者插入内容到文档中的某个位置。伪元素使用两个冒号 ::来表达，例如：::after, ::before, ::first-letter等。
一些常见的伪元素包括：
::before：在元素内容的前面插入内容::after：在元素内容的后面插入内容::first-letter：选中块级元素的第一行的第一个字母::first-line：选中块级元素的第一行::selection：选中用户选中的元素部分
伪类和伪元素的区别
- 定义方面：伪类是对元素的特定状态进行选取，而伪元素则是创建出DOM树中不存在的元素。
- 使用规则方面：伪类使用一个冒号
:，而伪元素使用两个冒号::。 - 作用对象方面：伪类通常作用在原有元素上，而伪元素是创建新的虚拟元素插入DOM树。
- 数量限制方面：在一个选择器中可以使用多个伪类，而伪元素则限制为一个。
总结
伪类和伪元素都是特殊的选择器，它们的作用是选取那些不能通过普通 CSS 选择器选取到的元素或元素的某個狀態。
伪类主要是用来基于元素的状态或根据结构来选择元素，而伪元素则是用来选取元素的某个特定部分。