CSS伪类和伪元素的差别详解

日期:2021-01-20 类型:科技新闻 

关键词:微信公众号平台小程序,微信打分小程序,小程序发布,小程序大全,微信小程序编程

最先,阅读文章 w3c 对二者的界定:

CSS 伪类用于向一些挑选器加上独特的实际效果。CSS 伪元素用于将独特的实际效果加上到一些挑选器。

能够确立两点,第1二者都与挑选器有关,第2便是加上1些“独特”的实际效果。这里独特指的是二者叙述了别的 css 没法叙述的物品。

伪类类型

伪元素类型

差别

这里用伪类 :first-child 和伪元素 :first-letter 来开展较为。


拷贝编码
编码以下:


p>i:first-child {color: red}
<p>
<i>first</i>
<i>second</i>
</p>

 //伪类 :first-child 加上款式到第1个子元素
假如大家不应用伪类,而期待做到上述实际效果,能够这样做:


拷贝编码
编码以下:

.first-child {color: red}
<p>
<i class="first-child">first</i>
<i>second</i>
</p>

即大家给第1个子元素加上1个类,随后界定这个类的款式。那末大家接着看看为元素:


拷贝编码
编码以下:

p:first-letter {color: red}
<p>I am stephen lee.</p>

//伪元素 :first-letter 加上款式到第1个字母
那末假如大家不应用伪元素,要做到上述实际效果,应当如何做呢?


拷贝编码
编码以下:

.first-letter {color: red}
<p><span class='first-letter'>I</span> am stephen lee.</p>

即大家给第1个字母加上1个 span,随后给 span 提升款式。
二者的差别早已出来了。那便是:

伪类的实际效果能够根据加上1个具体的类来做到,而伪元素的实际效果则必须根据加上1个具体的元素才可以做到,这也是为何她们1个称为伪类,1个称为伪元素的缘故。

总结

伪元素和伪类之因此这么非常容易搞混,是由于她们的实际效果相近并且写法相仿,但具体上 css3 以便区别二者,早已确立要求了伪类用1个冒号来表明,而伪元素则用两个冒号来表明。

:Pseudo-classes::Pseudo-elements

但由于适配性的难题,因此如今绝大多数還是统1的单冒号,可是抛开适配性的难题,大家在撰写时应当尽量培养好习惯性,区别二者。

简易的说呢:伪元素的权重比伪类高,例如1个器皿的为元素和伪类都界定了同1特性,但值不1样,那末将选用伪元素的。 从标准的角度伪元素1个网页页面只应用1次,而伪类能够数次应用。伪元素造成新目标,在Dom中看不见,可是能够实际操作;伪类是Dom中1个元素的不一样情况;