伪类和伪元素的区别

• css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或是列表中的第一个元素，又或者是鼠标悬停在某个超链接上时要设置的样式。

• 伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。

• 伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

伪类的分类

一般分为状态伪类和结构性伪类

• 常见的状态伪类

  是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式，当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。

  :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 匹配禁用的表单元素

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

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

• 常见的伪元素选择器

  ::first-letter 选择元素文本的第一个字符

  ::first-line 选择元素文本的第一行

  ::before 在元素内容的最前面添加新内容

  ::after 在元素内容的最后面添加新内容

  ::selection 匹配用户被用户选中或者处于高亮状态的部分

  ::placeholder 匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效