CSS 理解伪类与伪元素
在刚开始学习CSS的时候写过一篇叫做CSS伪类与伪元素的文章，大致是把w3school搬过来罢了。
在面试的过程中，有面试官问我，伪类与伪元素的区别是什么？——我，一脸懵逼，只能举例说伪类伪元素大致是哪些东西（而且还说错了）。
回来之后，果断查了查伪类与伪元素，才发现完全是可以理解而不是记忆的知识点。
引子：
我们需要将一个列表(list)中最后一个元素去掉border-bottom，该怎么做呢？
当然，我们的第一反应就是设置:last-child的border-bottom，这是最简单的办法，但是随后，我们遇到了新问题，IE8怎么办。
然后我再次一脸懵逼，事实上，遇到这种情况时，通常我会有一种思路来解决：从表现出发，转换思路。
我们要去掉最后的横线，从某些情况下，表现的角度而言，我们可以看成是第一个元素没有顶部的横线，那么我们就把问题转换为了:first-child，这是支持IE8的表现形式，问题得解。
那么之后面试官就问到伪类和伪元素的问题了，实际上可能是一种提示，不过当时我没有想明白，思路也有所限制（其实很好想，之后讲完伪类与伪元素，相信大家都能想到）。
比如我们设置:hover、:first-child，是不是就相当于给指定的元素添加了class="hover first-child"？
而我们的::before呢，相当于在指定元素前定义一个元素（实际上是指定元素的子元素，默认显示成前面的效果），等效的效果我们可以通过在HTML添加实际元素来实现。
就是说，虽然我们并未在HTML里定义指定的内容，他们却代替了HTML中的内容实现了我们的效果，如果是相当于添加类，那么就叫做伪类，相当于添加元素，就称之为伪元素。
那么这里，我们只要把伪元素变成实际的元素，就能够保证其兼容了。
拓展参考：
植入部分
如果您觉得文章不错，可以通过赞助支持我。
如果您不希望打赏，也可以通过关闭广告屏蔽插件的形式帮助网站运作。