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

最先，阅读文章 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个元素的不一样情况；