在css中伪元素和伪类的名字看起来十分相似，但是其内容却是千差万别，那么我们就来一起看看他们的区别吧！
伪类
伪类选择器是一系列由css规定好的选择器，他们以冒号开头，有普通型和函数型。伪类是很大的一类简单选择器，它是选择器能力的补充，所以在使用时最好有约束性，在不得不使用的场景使用，以增强代码的性能和可读性。下面有几类常用的可以一起看看。
树结构关系
众所周知，渲染后的html文档会被渲染成DOM树，树结构关系的伪类标签就是通过节点和节点之间的关系来选择元素，下面是几个例子：
:root：树的根元素:empty：没有子节点的元素:nth-child()，:nth-last-child()：这是函数型伪类，可以选中xx倍数的子元素:first-child，:last-child：第一个/最后一个
链接与行为
这一类伪类标签是为了选中不同状态下的链接/元素，例子如下：
:any-link：任意链接:link：未访问过的链接:visited：访问过的链接:hover：鼠标悬停的元素:active：用户已经点击，鼠标还未抬起:focus：焦点落在的元素:target：选中浏览器URL的hash部分所指的元素
逻辑伪类
:not是函数型伪类，括号中可以传入简单选择器。
伪元素
伪元素本身并不单单是一种选择规则，它还是一种机制。伪元素实际产生的效果是把不存在的元素硬选出来，以双冒号开头。下面说一说经常用的::first-line/::first-letter，::before/::after。
::first-line是表示元素的第一行，这里的第一行指的是排版后显示的第一行，和html文档无关。first-line必须是出现在最内层的块级元素之内；::first-letter是表示元素的第一个字母，它的位置是在所有便签之内。
相比来说::before/::after就不是把已有内容套上一个元素，而是真正的无中生有，造出一个元素。::before表示在元素内容之前插入一个虚拟的元素，::after表示在元素内容之后插入，而且这两个伪元素中的属性必须要有content才能生效。在实际开发中，这两个伪元素一般都是创建一些修饰性的元素，这样既可以通过纯css显示效果，还不必在DOM中添加很多无意义的空元素。
以上就是伪元素和伪类选择器的区别啦，希望可以对你有帮助！
Reference:
time.geekbang.org/column/arti…
time.geekbang.org/column/arti…
