伪类：向某些选择器中添加特殊的效果
伪元素：将一些特殊的效果添加到某些选择器
自己的个人理解伪类就是一些状态，比如:hover、:active、:link、:visited、:first-child、:focus
伪元素，顾名思义，就是伪造的元素，像:after、:before、:first-line、first-letter这些
（以上只是个人便于理解）
下面才是真的重头戏：
啥也不说，直接上代码吧：
关于伪类
p>i:first-child {color: red}
<p>
<i>first</i>
<i>second</i>
</p>
.first-child {color: red}
<p>
<i class="first-child">first</i>
<i>second</i>
</p>
关于伪元素
p:first-letter {color: red}
<p>I am stephen lee.</p>
.first-letter {color: red}
<p><span class='first-letter'>I</span> am stephen lee.</p>
你会发现，伪类的实现可以通过添加一个类来达到目的，但是伪元素的话就是通过添加一个实际的元素才能达到目的，这样它们的命名是这样就无可厚非了
最后一点，就是CSS3为了区别上述两者，伪类使用的是：——一个冒号,而伪元素使用的是::——两个冒号
