讨论1：伪元素和伪类的区别

通过实际的例子来讲解一下：
例1：

<div>
<p>我们是快乐的好朋友</p>
<p>我们天天一起歌唱...</p>
</div>

如果想选择第一个p变成红色。
那么，

<div>
<p class="red">我们是快乐的好朋友</p>
<p>我们天天一起歌唱...</p>
</div>

再给.red添加红色样式即可。
如果用伪类：

p:first-child{
 color:red;
}

就是，伪类可以代替一个特殊位置的类名。

下面再看看一个例子。
例2：

<p>我们是快乐的好朋友</p>

如果想选择第一个文字“我”变成红色。
那么，

<p><span>我</span>们是快乐的好朋友</p>

我们需要向“我”添加一个新的元素span，然后对span定义样式。
如果是使用伪元素：

p::first-letter{
 color:red;
}

就是，伪元素可以代替一个特殊位置的元素。

总结就是：

伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到。

这也是为什么一个称为伪类，一个称为伪元素的原因。

讨论2：伪元素用两个冒号和伪类用单冒号

伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
但因为兼容性的问题，所以现在大部分还是单冒号，但是抛开兼容性的问题，我们在实际使用当中或者书写时应该尽可能养成好习惯，区分两者。当遇到兼容性问题的时候再统一单冒号也不迟。毕竟，随着时间的推移都会全兼容。