一、什么是伪类和伪元素
伪类一开始单单只是用来表示一些元素的动态状态，典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。
伪元素则代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
二、伪类与伪元素的区别
根本区别在于：它们是否创造了新的元素(抽象)。
这里通过两个例子来说明两者的区别。
下面是一个简单的html列表片段：
<ul> <li>我是第一个</li> <li>我是第二个</li></ul>
如果想要给第一项添加样式，可以在为第一个<li>添加一个类，并在该类中定义对应样式：
<ul> <li class="first-item">我是第一个</li> <li>我是第二个</li></ul> li.first-item {color: orange}
如果不用添加类的方法，我们可以通过给设置第一个<li>的:first-child伪类来为其添加样式。这个时候，被修饰的<li>元素依然处于文档树中。
li:first-child {color: orange}
下面是另一个简单的html段落片段：
<p>Hello World, and wish you have a good day!</p>
如果想要给该段落的第一个字母添加样式，可以在第一个字母中包裹一个元素，并设置该span元素的样式：
<p><span class="first">H</span>ello World, and wish you have a good day!</p>
.first {font-size: 5em;}
如果不创建一个<span>元素，我们可以通过设置<p>的:first-letter伪元素来为其添加样式。这个时候，看起来好像是创建了一个虚拟的<span>元素并添加了样式，但实际上文档树中并不存在这个<span>元素。
<p>Hello World, and wish you have a good day!</p>
p:first-letter {font-size: 5em;}
从上述例子中可以看出，伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。
三、伪元素是使用单冒号还是双冒号
CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(::)，:hover和:active等伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外，大部分浏览器都支持伪元素的双冒号(::)表示方法。
然而，除了少部分伪元素，如::backdrop必须使用双冒号，大部分伪元素都支持单冒号和双冒号的写法，比如::after，写成:after也可以正确运行。
对于伪元素是使用单冒号还是双冒号的问题，w3c标准中的描述的大概的意思就是：虽然CSS3标准要求伪元素使用双冒号的写法，但也依然支持单冒号的写法。为了向后兼容，我们建议你在目前还是使用单冒号的写法。
实际上，伪元素使用单冒号还是双冒号很难说得清谁对谁错，你可以按照个人的喜好来选择某一种写法。
四、伪类与伪元素的具体用法
根据用途分类的伪类总结图和根据冒号分类的伪元素总结图：
某些伪类或伪元素仍然处于试验阶段，使用前先检查一下浏览器兼容性。
参考资料：