伪类和伪元素的区别？

一、简单区分
伪类用于当已有元素处于某种状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。也就是说，当用户悬停指定的元素时，我们可以通过:hover来描述这个元素的状态。
伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说，我们可以通过::before来在一个元素前添加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
有时你会发现伪元素使用了两个冒号::而不是一个冒号:。这是CSS3的一部分，并尝试区分伪元素和伪类。大多数浏览器都支持这两个值。按照规则应该使用（::）而不是（:），从而区分伪类和伪元素。但是，由于在旧版本的W3C规范并未对此进行特别区分，因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。
二、常见的伪类选择器
:link:选取未访问过的超链接元素。如果我们注意过搜索引擎的结果的话，它里面的链接只要点过的就会变色，从而标记哪个链接是访问过的。:link 这个属性就是用来标识没访问过的链接。
:visited:选取访问过的超链接元素。和第一条相反，:visited 是用来标记哪个链接是已经访问过的，防止重复点击。
:hover:选取鼠标悬停的元素。，这个伪类经常用在 PC 端，当鼠标放在一个元素上时，可以用 :hover 来控制鼠标悬停的样式。因为在移动端里没有鼠标的概念，所以移动端里很少用这个伪类。
:active:选取点中的元素。这个伪类的作用在刚才提到过了，当我们希望按钮有操作反馈的时候，可以用它来标记操作反馈的样式。当然这个伪类也是可以通用的，并不是只能用在按钮上。
:focus:选取获得焦点的元素。这个伪类用来标识获得焦点的元素，比如搜索框在聚焦的时候有个比较明显的边框，方便用户知道当前在可输入的状态。
:empty:选取没有子元素的元素。比如选择空的 span，就可以用 span:empty 选择器来选择。这里要注意元素内有空格的话也不能算空，不会被这个伪类选中。
:checked: 选取勾选状态的 input 元素， 只对 radio 和 checkbox 生效。
:disabled:选取禁用的表单元素。
:first-child:选取当前选择器下第一个元素。
:last-child:和 first-child 相反，选取当前选择器下最后一个元素。
:nth-child(an+b):选取指定位置的元素。这个伪类是有参数的，参数可以支持 an+b 的形式，这里 a 和 b 都是可变的，n 从0起。使用这个伪类可以做到选择第几个，或者选择序号符合 an+b 的所有元素。比如使用 li:nth-child(2n+1)，就可以选中 li 元素中序号是2的整数倍加1的所有元素，也就是第1、3、5、7、9、2n+1个 li 元素。
:nth-last-child(an+b):这个伪类和 nth-child 相似，只不过在计数的时候，这个伪类是从后往前计数。
:only-child:选取唯一子元素。如果一个元素的父元素只有它一个子元素，这个伪类就会生效。如果一个元素还有兄弟元素，这个伪类就不会对它生效。
:only-of-type:选取唯一的某个类型的元素。如果一个元素的父元素里只有它一个当前类型的元素，这个伪类就会生效。这个伪类允许父元素里有其他元素，只要不和自己一样就可以。
三、常见的伪元素选择器
::first-line:为某个元素的第一行文字使用样式。
::first-letter:为某个元素中的文字的首字母或第一个字使用样式。
::before:在某个元素之前插入一些内容。
::after:在某个元素之后插入一些内容。
::selection:对光标选中的元素添加样式。