2分钟带你搞懂CSS伪元素和伪类的区别

相信很多CSS新手对伪类和伪元素这两个一直分不太清，MDN文档说的太官方也读不明白，那么就让我带你用2分钟的事件分清伪类和伪元素！

一.伪类

1.定义：MDN中对伪类的定义 感兴趣的可以看看，不过不一定能看懂 2.伪类种类：

3.伪类小例子：伪类小例子

二.伪元素

1.定义：MDN中对伪元素的定义 2.伪元素种类：

3.伪元素小例子：伪元素小例子

三.区别

这里以伪类 :first-child 和伪元素 :first-letter 为例。

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

不用伪类的版本

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

我们发现如果我们不用伪类的话，要想实现预期效果就要手动在已有的元素添加一个类，然后进行写样式

再看另一个用伪元素实现的效果

p:first-letter {color: red}
<p>hello world</p>

不用伪元素怎么做呢

p:first-letter {color: red}
<p><span class='first-letter'>hello</span> world</p>

我们发现我们要想实现同样的效果就必须再添加一个元素再给这个元素一个类名再写点样式

三.总结

这下再看官方的定义不就清楚明白多了，这俩的区别是如果不用伪类和伪元素写样式，前者想要选中某个目标不需要新加元素标签，后者需要。