伪元素与伪类的使用

伪元素伪类听名字可能就会产生迷惑，其实从名称上我们也可以获取一些信息，伪元素——顾名思义是一个元素，伪类——与类class有关系，不是一个元素！

在CSS1和CSS2中对伪类和伪选择器没有做出很明显的区别定义，而二者在语法是一样的，都是以:开头，这造成很多人会将某些伪元素误认为是伪类，如:before，:after；而在CSS3给出的定义中，二者区别更为明显，也更容易理解。

伪元素

伪元素是一个元素，这个元素并不同于一般的html素，伪元素是通过css代码生成的，因此称它为伪元素，常见的伪元素有::after/::before/::first-letter/::first-line等等。

伪类

伪类是DOM树没有定义的虚拟元素，伪类用来选择DOM树之外的信息，或是不能用简单的选择器进行表示的信息。常见的伪类有:hover/:visited/:active/:link等等。

我们可以把伪类理解为HTML标签的各种状态，例如a标签的光标悬浮状态（hover），访问过状态（visited）等。

伪元素与伪类区别

• 伪元素是一个非标准的HTML元素，伪类不是元素，而是html元素之外的包含的信息，可以理解成元素的状态
• 他们都被选择，但不能被一般的选择器选中，他们的选择器需要加“：”，例：a：hover、div：after等
• 伪元素可以通过CSS被创建，伪类不能，它只能被CSS选中

什么时候使用伪元素

当想在页面上添加一个元素，但又不想在body中写时，可以使用伪元素；当想一次为想在多个元素中添加元素时，可以使用伪元素，例如在每个没使用浮动的元素后添加一个元素（此元素用来清除浮动）、在所有二级菜单的前边添加一个span用来显示当前光标悬浮在该菜单时。

---

参考文章：https://www.cnblogs.com/ammyben/p/8012747.html