区别伪类和伪元素

最近学习遇到伪类和伪元素，有些混淆，看了些博客，自己再总结一下。

首先描述一下w3c对两者的定义：CSS伪类用于向某些选择器添加特殊的效果；CSS伪元素用于将特殊的效果添加到选择器上。两者目标都是元素样式改变。例子如下：

伪类：举例 first-child是给第一个子元素添加效果

如果不用伪类可以用下面类样式：

可以看出，伪类的实现效果可以用其他具体的类样式实现。

伪元素：举例：before和after是在一个元素之前和之后添加内容

    

可以看出，在P元素内容中的首部和尾部插入了before和after；想达到同样的效果，可以用添加标签元素<span>解决。

从根本上看区别，伪类的效果可以通过一个其他具体的类实现；伪元素的效果可以通过添加一个实际的元素达到。

两者写法区别：伪类  :first-child      伪元素   ::before