伪类包含两种：状态伪类和结构性伪类。
| 状态伪类 |
是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。 |
| :link |
应用于未被访问过的链接； |
| :hover |
应用于鼠标悬停到的元素； |
| :active |
应用于被激活的元素； |
| :visited |
应用于被访问过的链接，与:link互斥。 |
| :focus |
应用于拥有键盘输入焦点的元素。 |
| 结构性伪类 |
css3新增选择器，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。 |
| :first-child |
选择某个元素的第一个子元素； |
| :last-child |
选择某个元素的最后一个子元素； |
| :nth-child() |
选择某个元素的一个或多个特定的子元素； |
| :nth-last-child() |
选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算； |
| :nth-of-type() |
选择指定的元素； |
| :nth-last-of-type() |
选择指定的元素，从元素的最后一个开始计算； |
| :first-of-type |
选择一个上级元素下的第一个同类子元素； |
| :last-of-type |
选择一个上级元素的最后一个同类子元素； |
| :only-child |
选择的元素是它的父元素的唯一一个子元素； |
| :only-of-type |
选择一个元素是它的上级元素的唯一一个相同类型的子元素； |
| :empty |
选择的元素里面没有任何内容。 |
| 表单相关伪类 |
|
| :checked |
匹配被选中的input元素，这个input元素包括radio和checkbox； |
| :default |
匹配默认选中的元素，例如：提交按钮总是表单的默认按钮； |
| :disabled |
匹配禁用的表单元素 |
| :empty |
匹配没有子元素的元素。如果元素中含有文本节点、HTML元素或者一个空格，则:empty不能匹配这个元素； |
| :enabled |
匹配没有设置disabled属性的表单元素； |
| :in-range |
匹配在指定区域内元素； |
| :out-of-range |
与:in-range相反，它匹配不在指定区域内的元素； |
| :indeterminate |
indeterminate的英文意思是“不确定的”。当某组中的单选框或复选框还没有选取状态时，:indeterminate匹配该组中所有的单选框或复选框； |
| :valid |
匹配条件验证正确的表单元素； |
| :invalid |
与:valid相反，匹配条件验证错误的表单元素； |
| :optional |
匹配是具有optional属性的表单元素。当表单元素没有设置为required时，即为optional属性； |
| :required |
匹配设置了required属性的表单元素； |
| :read-write |
匹配处于编辑状态的元素。input，textarea和设置了contenteditable的HTML元素获取焦点时即处于编辑状态； |
| :scope(处于试验阶段) |
匹配处于style作用域下的元素。当style没有设置scope属性时，style内的样式会对整个html起作用； |
伪元素是对元素中的特定内容进行操作，而不是描述状态。它的操作层次比伪类更深一层，因此动态性比伪类低很多。实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，并不存在于文档结构中！常见的伪元素选择器包括：
| 伪元素 |
|
| :first-letter |
选择元素文本的第一个字（母）。 |
| :first-line |
选择元素文本的第一行。 |
| :before |
在元素内容的最前面添加新内容。 |
| :after |
在元素内容的最后面添加新内容。 |
注：伪元素虽然强大，但是还是有一些特定的标签是不支持伪元素 before 和 after 的。诸如 ![]()
、、
