我终于理解了伪类和伪元素

before.jpg

伪类和伪元素，对于绝大多数同学来说，都是耳熟能详的名字，但确实又有很多人搞不清楚它们之间的区别，以致于混淆概念。而当概念都混淆的时候，也往往意味着你不会经常使用它，怕出错，怕用不好。而这也会大大影响你的效率，本来几行代码就可以完成的工作，却要写上一大堆......所以，花点时间理清楚每一个看似微小的概念，会让我们的编程更有效率。下面进入正题。

伪类和伪元素的区别，其实很简单，从字面上就可以理解。它们有一个共同的修饰词“伪”，那么“伪”是什么意思呢？就是假的呗。所以，伪类就是假的类，伪元素就是假的元素，这就是在字面上它们之间的区别。下面我们再从定义上感受一下。

1.伪类

CSS3给出的定义是：

The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.

大致翻译过来的意思就是：伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。

大家直接看原文

如下是一些参考网页

https://www.jianshu.com/p/c7dcb3008e5c

https://www.runoob.com/css/css-pseudo-classes.html

https://www.w3school.com.cn/css/css_pseudo_classes.asp