趣解：伪类和伪元素

导入：

出来混，是要还的。之前跳过的知识点，以后的某一天都需要你加倍奉还。
最近写伪类和伪元素的时候，老是搞混淆。也许是之前没有记牢固吧，决定今天自己再理一遍。

这里做一个类比：把上面图片中的这个小人看作一个体，伪类就相当于他的肢体(手)，手和个体是整体，不能拆分。吃饱了(肚子变大了)这个状态，就相当于他的状态伪类。

伪元素就相当于他的书包，书包不属于个体的一部分，是额外添加的。书包可以放在小孩的胸前，也可以放在小孩的背后；分别对应 ::before 和 ::after。书包中的书，对应伪元素的content 属性。

第一部分：伪类

伪类分为：结构性伪类和状态伪类。

1、结构性伪类，就类比个体的肢体（手、脚…）

p 代表小孩
- p：first-child 选择 p 元素的第一个子元素；// 小孩子的手
- p：last-child 选择 p 元素的最后一个子元素； // 小孩子的脚
- P：nth-child(3n) 选择 p 元素的一个或多个特定的子元素；// 小孩子手的第3、6、9根这三个手指
- P：nth-last-child(2) 选择 p 元素的一个或多个特定的子元素；// 小孩子脚的第二根手指

———— 其他的结构性伪类

:nth-of-type() 选择指定的元素；

:nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；

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

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

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

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

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

2、状态伪类

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

• :link 应用于未被访问过的链接；// 小孩子一个人安静的时候
• :hover 应用于鼠标悬停到的元素；// 小孩子拿着笔，准备写字的状态
• :active 应用于被激活的元素（鼠标点击和松开）；
• :visited 应用于被访问过的链接，与:link互斥。// 有人探望小孩子的时候
• :focus 应用于拥有键盘输入焦点的元素。

3、伪类的注意事项：

• first-child 与 nth-child();

  适合 p 元素的前面没有兄弟元素的情况。否则 p:first-child 选择不到元素，p:nth-child(2) 选取元素存在错误
  

• first-of-type 与 nth-of-type()

  适合 p 元素的前面存在兄弟元素的情况。适用于前面有猴子的情况。first-of-type 先找出所有的 p 元素再找到第一个。
  

第二部分：伪元素

1、伪元素：

• ::first-letter 选择元素文本的第一个字（母）。

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

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

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

第三部分：伪类和伪元素的区别：

伪类就类比小孩子的手、脚；这些本来就是小孩身体结构的一部分。而伪元素，就类比于书包，是额外添加的，不属于小孩子身体结构的一部分。

总结：伪类操作的是文档树本身的元素，而伪元素操作的是文档树之外(额外添加,并不存在于文档结构中)的元素。

注意：

有时你会发现伪元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式。单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。对于 CSS2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法 ::before 作用是一样的。

参考链接伪类和伪元素