探讨伪元素和伪类的本质区别

       伪元素和伪类的区别，已经是一个老生常谈的话题了。然而小编发现网上不少朋友会把两者混为一谈，并且以讹传讹，导致误导了其他的朋友，不过小编不怪他们，毕竟W3CSchool上也没把两者的区别说清楚。从某种意义上说，这种误导所造成的害处不大，因为哪怕概念混淆了，也一般不会影响使用，反正目前的伪类和伪元素种类都不多，也不支持自定义，所以不管它是伪类还是伪元素，只要知道它的功能就行了。

　　然而新手很容易就被绕进去，因为对于刚入门的初学者来说，他们往往不知道哪些内容是必须掌握的，哪些看不懂可以先跳过。于是，他们在看到伪类和伪元素的时候，就总会被卡住，感觉不理解就心里不踏实，然后没法学习下去。既然如此，那小编就希望通过这篇教程帮助新手们跨过这道坎，同时也希望老手抽空看下自己的理解是否真的正确了。

　　现在我们先把目前css所支持的伪类和伪元素都列出来。小编会打乱它们的顺序，然后通过它们的特性判断它们是伪类还是伪元素。

　　first-child，first-letter，first-line，lang，before，after

　　大家看到了可能会有疑问，不是还有hover，active之类的交互效果么？嗯，没错，这里小编还没有列出来，主要是考虑到交互效果不使用伪XX的话，就得用javaScript来实现了，然后可能会给大家的理解带来额外的干扰。

　　下面我们来看第一个，first-child，它将会匹配符合选择器规则的第一个元素。比如p:first-child就是匹配html页面中的第一个段落。

　　运行效果如下所示，第一个段落被设置成了红色

　　第一个段落

　　第二个段落

　　如果不使用first-child，那么我们要怎么做呢？由于我们需要第一个p元素内的文字变红，而其他p元素内的文字不变红，所以只要对第一个p元素设置一下class也能实现first-child的效果。

　　也就是说，通过使用类，我们可以达到跟first-child一样的效果，first-child在这里实现了类选择器的功能，所以我们判断first-child是伪类。

　　再来看下一个，first-letter。它匹配符合选择器规则的所有元素内的第一个字符。比如p:first-letter就是匹配HTML页面中所有段落的第一个字。

　　运行效果，每个段落的第一个字符都变成红色

　　第一个段落

　　第二个段落

　　因为变红的文字都在p元素内，然而p元素内的文字却没有全部变色，所以想仅仅通过类来实现跟first-letter一样的效果是不可能的。

　　我们会发现，所有文字都变成了红色，如下所示

　　第一个段落

　　第二个段落

　　所以如果没有first-letter，那我们必须把每个段落中的第一个字包在一个标签里，从而跟其它文字进行区分。

　　再次运行，效果就出来了。

　　在这个伪XX中，如果没有first-letter的参与，那么我们必须在HTML页面中创建新的元素来实现相同的效果。也就是说，first-letter在本例中充当了span元素的角色。因此我们说，first-letter是伪元素。

　　大家可能会觉得，这里也可以把类给用上啊。

       譬如这样

　　没错，这种做法也可以，但是在这种场合，类并非必不可少。

　　这时候，可能大家会有质疑，对于上一个伪XX——first-child来说，类也不是必不可少的因素啊，我们完全可以通过元素实现跟first-child一样的效果。

　　在这个例子中，我们发现类和元素两者选择其一都能达到跟first-child一样的结果。也就是类和元素都不是实现first-child的必要条件。所以说，类没有必要性可言，由此我们可以基于元素的必要性，推测出判断伪类和伪元素的一个“准则”。

　　在不使用某个伪XX，但又要实现跟该伪XX一样的效果时，如果必须创建新的元素（HTML标签）才能做到的话，那么这个伪XX就是伪元素，否则就是伪类。

　　我们用这条推测出来的“准则”看看后面的伪XX。

　　下一个是first-line，它匹配符合选择器规则的所有元素内的第一个字符。比如p:first-line就是匹配HTML页面中所有段落的第一行。

　　运行效果如下所示，段落里的第一行文字变成了红色，而第二行仍为默认的黑色

　　段落里的第一行文字

　　段落里的第二行文字

　　由于第1行和第2行文字都被包在同一个p里面，所以想只通过class实现该效果也是不可能的事情。

　　显然这样会导致第二行文字也变成红色

　　段落里的第一行文字

　　段落里的第二行文字

　　因此要实现first-line，我们还是得用一个元素把第一行文字给包起来。

　　也就是说，要实现跟first-line一样的效果，我们同样需要创建新元素，而无法单用类来完成。所以first-line也是伪元素。

　　然后看下一个lang。对于不制作多语言版本网站的朋友来说，听到这个属性可能会觉得比较陌生。不过这里我们也来看下lang的基本用法。

　　在这一例子中，lang这个伪XX匹配的是lang属性等于no的p元素，也就是该HTML文档的第一个段落。

       运行效果如下所示

　　包含lang属性的文字

　　不包含lang属性的文字

　　可以发现，变红的文字都包在一个p标签内，而且该p标签内的所有文字都变成红色了。所以p元素内的文字无需再单独拆分，我们给lang=no的p元素加上class即可实现跟lang一样的效果。

　　可见，要实现跟lang一样的效果，我们无需创建任何新元素，所以我们说，lang是伪类。

　　然后就剩下before和after了，它们都用于插入新内容。

　　以before为例，想对p元素使用before这个伪XX的话，我们可以这样写。

　　运行效果如下图所示

　　段落前面插入了一张图片，这种颠覆性的变化，想要不依赖于before进行实现的话，方法貌似只能插入一个用该图片填充背景的新元素，或者直接插入图片元素。

　　所以，要实现跟before一样的效果，我们也必须创建新元素，而after跟before的机制完全一致，只是一个在前一个在后。所以before和after都是伪元素。

　　下面我们来小结一下。

　　first-child是伪类。

　　first-letter是伪元素。

　　first-line是伪元素。

　　lang是伪类

　　before，after都是伪元素。

　　大家可以去W3CSchool对照一下，就会发现所有的判断都是正确的。也就是说，前面的“准则”确实可以用来区分伪类和伪元素，现在小编再来重复一下。

　　在不使用某个伪XX，但又要实现跟该伪XX一样的效果时，如果必须创建新的元素（HTML标签）才能做到的话，那么这个伪XX就是伪元素，否则就是伪类。

　　最后就只剩下锚伪XX（也就是前面提到的hover，active那些）了。由于这些效果需要用Javascript进行模拟，所以本教程不再展开讨论。但根据前面的准则，相信大家都可以判断出，所有这些交互相关的伪XX都是伪类。至于原因，小编不打算再给出任何解释，大家自行思考一下就明白了。