很多人经常对CSS中的伪类和伪元素分不清楚，或者将这两者混为一谈，今天让我们来了解下这两者都有哪些区别。在CSS3之前是没有伪元素与伪类的区别的，直到CSS3才将这二者区分开来。
为什么要引入伪类和伪元素？
CSS之所以要引入伪类和伪元素是为了格式化文档树之外的信息，也就是说，伪类和伪元素是用来修饰不在文档树的部分，比如第一句话中的第一个字母或列表中的第一个元素。
什么是伪类？
伪类表示的是被选择元素的某种状态,例如hover。
伪类的分类
状态性伪类
状态性伪类是根据元素当前的状态进行选择的，当元素进入某种状态时呈现一种样式，进入另一种状态时呈现另一种样式。
典型的状态性伪类有：
- :link 应用与未被访问过的链接。
- :hover 应用于鼠标悬停到的元素。
- :active 应用于被激活的元素。
- :visited 应用于被访问过的链接，与:link互斥。
- :focus 应用于拥有键盘输入焦点的元素。
结构性伪类
CSS3新增选择器，利用DOM树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使得文档结构更加简洁。
典型的结构性伪类有下面的例子：
- div:first-child 选择属于其父元素的第一个子元素的每个div元素。
- div:last-child 选择属于其父元素最后一个子元素的每个div元素。
- div:nth-child(n) 选择属于其父元素的第n个子元素的每个div元素。
什么是伪元素？
伪元素表示的是被选择元素的某个部分，这个部分看起来像一个独立的元素，例如::before和::after。
伪类和伪元素的区别
伪类是操作文档中已有的元素，而伪元素则是创建了一个不在文档树中的元素，并为其添加样式。
