定义
伪类
CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。
例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。
/* 所有用户指针悬停的按钮 */
button:hover {
color: blue;
} 复制
伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。
伪元素
伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。
下例中的 ::first-line 伪元素可改变段落首行文字的样式。
/* 每一个 <p> 元素的第一行。 */
p::first-line {
color: blue;
text-transform: uppercase;
} 复制
伪类连同伪元素一起，他们允许你不仅仅是根据文档 DOM 树中的内容对元素应用样式，而且还允许你根据诸如像导航历史这样的外部因素来应用样式（例如 :visited），同样的，可以根据内容的状态（例如在一些表单元素上的 :checked），或者鼠标的位置（例如 :hover 让你知道是否鼠标在一个元素上悬浮）来应用样式。
分类
伪类
伪元素
区别
下面是一个简单的html列表片段：
<ul>
<li>我是第一个</li>
<li>我是第二个</li>
</ul> 复制
如果想要给第一项添加样式，可以在为第一个
- 添加一个类，并在该类中定义对应样式：
<ul>
<li class="first-item">我是第一个</li>
<li>我是第二个</li>
</ul>
li.first-item {
color: orange
} 复制
如果不用添加类的方法，我们可以通过给设置第一个
- 的:first-child伪类来为其添加样式。这个时候，被修饰的
- 元素依然处于文档树中。
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;
} 复制
如果不创建一个元素，我们可以通过设置<p>的:first-letter伪元素来为其添加样式。这个时候，看起来好像是创建了一个虚拟的元素并添加了样式，但实际上文档树中并不存在这个元素。
<p>Hello World, and wish you have a good day!</p>
p:first-letter {
font-size: 5em;
} 复制
从上述例子中可以看出，伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。
总结
1.伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
2.伪元素本质上是创建了一个有内容的虚拟容器；
3.CSS3中伪类和伪元素的语法不同；
4.可以同时使用多个伪类，而只能同时使用一个伪元素；