前言：
之前自己一直没有弄清楚伪类和伪元素的区别，所以自己打算总结回顾一下。
一、伪类和伪元素的定义
伪类(Pseudo-classes)
CSS 伪类用于向某些选择器添加特殊的效果
伪元素
CSS 伪元素用于向某些选择器设置特殊效果。
分析一下有2点共同点：
- 作用于选择器
- 显示特殊效果
二、伪类和伪元素分类
伪类的分类
Markdown
伪元素分类
Markdown
三、伪类和伪元素的区别
这里用伪类 :first-child 和伪元素 ::first-letter 来进行比较。
//css
.par p:first-child{
color:red;
}
<div class='par'>
<p class='one'>123</p>
<p class='two'>456</p>
</div>
//伪类 :first-child将样式添加给第一个p子元素
Markdown
但是如果不用伪类first-child，那么应该怎么显示这个效果呢？我们来试试
//css
.one{
color:red;
}
<div class='par'>
<p class='one'>123</p>
<p class='two'>456</p>
</div>
效果是一样的，伪类 :first-child相当于给子元素添加一个类并且定义样式
我们来看看伪元素::first-letter
//CSS
.text:first-letter{
color: red
}
<p class='text'>文本啊</p>
Markdown
但是，如果我们不用伪元素::first-letter，应该怎么显示这个效果呢？
我们继续来尝试一下
//css
.text-one{
color: red;
}
<p><span class='text-one'>文</span>本啊</p>
到达这样的效果，我先添加元素span，然后添加样式。
到这里伪类和伪元素的区别已经很明显了
针对作用选择器的效果，伪类需要添加类来达到效果，而伪元素需要增加元素，所以一个叫伪类，另外一个叫伪元素。
由于二者之间产生的效果十分相似，所以CSS3标准里，为了区分二者已经规定伪类用单冒号:，伪元素用双冒号::，但是由于兼容性问题，大部分还是使用单冒号，如果不存在兼容问题，还是建议使用标准写法。
:Pseudo-classes
::Pseudo-elements
个人水平有限，如有不对之处，还望指正！！！
