一、伪类（pseudo classes）

　　用于已有元素处于某种状态时为其添加对应的样式，但是通过DOM树又无法表示这种状态，就可以通过伪类来为其添加样式。

例如：当用户悬停在指定元素时，可以通过:hover来描述这个元素的状态，虽然它和一般CSS相似，可以为已有元素添加样式，但是它只有处于DOM树无法描述的状态下才能为元素添加样式。

常见的状态伪类

:link 应用于未被访问过的链接；

:hover 应用于鼠标悬停到的元素；

:active 应用于被激活的元素；

:visited 应用于被访问过的链接，与:link互斥。

:focus 应用于拥有键盘输入焦点的元素。

二、伪元素（pseudo elements）

　　用于创建一些不在DOM树中的元素，并为其添加样式。

　　例如：我们可以通过:before来在一个元素之前添加一些文本，并为这些文本添加样式，虽然用户可以看见这些文本，但是它实际上并不在DOM文档中。

常见的结构性伪类

:first-child 选择某个元素的第一个子元素；

:last-child 选择某个元素的最后一个子元素；

:nth-child(n) 匹配属于其父元素的第 n个子元素，不论元素的类型；

:nth-last-child() 从这个元素的最后一个子元素开始算,选匹配属于其父元素的第 n个子元素，不论元素的类型；

:nth-of-type() 规定属于其父元素的第n个 指定 元素；

:nth-last-of-type() 从元素的最后一个开始计算,规定属于其父元素的指定 元素；

:first-of-type 选择一个上级元素下的第一个同类子元素；

:last-of-type 选择一个上级元素的最后一个同类子元素；

:only-child 选择它的父元素的唯一一个子元素；

:only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；

:checked匹配被选中的input元素，这个input元素包括radio和checkbox。

:empty 选择的元素里面没有任何内容。

:disabled匹配禁用的表单元素。

:enabled匹配没有设置disabled属性的表单元素。

:valid匹配条件验证正确的表单元素。

:in-range选择具有指定范围内的值的 input 元素。

:optional选择不带 "required" 属性的 input 元素。

:focus选择获得焦点的 input 元素。

三、区别

它们的区别是有没有创建一个DOM树之外的元素。

伪类：用于已有元素处于某种状态时为其添加对应的样式。

伪元素：用于创建一些不在DOM树中的元素。

可以同时使用多个伪类，但是只能同时使用一个伪元素。