很多人经常对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。

伪类和伪元素的区别

伪类是操作文档中已有的元素，而伪元素则是创建了一个不在文档树中的元素，并为其添加样式。