探讨伪元素和伪类的本质区别
当前位置:以往代写 > 网页教程 >探讨伪元素和伪类的本质区别
2019-06-14

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

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

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

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

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

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

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

探讨伪元素和伪类的本质区别_伪元素_伪类_CSS理论_课课家

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

  第一个段落

  第二个段落

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

与first-child效果等价的代码

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

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

使用first-letter代码

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

  第一个段落

  第二个段落

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

用类不能实现效果

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

  第一个段落

  第二个段落

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

与first-letter等价的代码

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

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

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

       譬如这样

结合类的代码

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

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

通过元素实现代码

#p#分页标题#e#

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

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

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

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

使用first-line代码

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

  段落里的第一行文字

  段落里的第二行文字

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

通过类不能实现first-liner效果

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

  段落里的第一行文字

  段落里的第二行文字

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

与first-line效果等价的代码

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

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

:lang的基本用法

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

       运行效果如下所示

  包含lang属性的文字

  不包含lang属性的文字

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

与:lang效果等价的代码

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

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

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

使用:before的代码

  运行效果如下图所示

使用:before的代码效果

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

与使用:before效果等价的代码

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

  下面我们来小结一下。

  first-child是伪类。

  first-letter是伪元素。

  first-line是伪元素。

  lang是伪类

  before,after都是伪元素。

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

#p#分页标题#e#

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

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

    关键字:

在线提交作业