说说伪类与伪元素的不同
伪元素用来创建HTML文档语言指定之外文档树的抽象层。比如HTML没有提供文档元素内容的首字母或第一行的访问机制。CSS伪元素允许作者引用这些除此之外无法访问的信息。伪元素还提供一种方法来引用不存在于文档中的内容。（比如，::before 和 ::after ）。
一个伪元素由2个冒号（::）加上伪元素的名字所定义。
每个选择器中只能出现一个伪元素，并且只能出现在选择器主体的后面。
伪元素默认是inline样式的，通过设置成绝对定位，可强制改变display为block，这样对其设置宽高才能生效。
注意：后续版本可能会允许每个选择器中出现多个伪元素。
从上面的定义，我们可以得知伪元素事实上创建了一个虚拟的元素，在这个虚拟元素上可以应用一般CSS规则乃至伪类选择器。伪元素并不选定（过滤）元素，实际上它们选定（过滤）内容（::first-line,::first-letter），把内容包装到一个虚拟的容器中，并可以为该容器添加样式。或创建内容（::before,::after，然后包装到一个虚拟容器中，作者可以为此容器添加样式。
伪元素实际上是1：选定（过滤）选择器的指定元素的内容，把内容包装到一个虚拟的容器中，并可以为该容器添加样式。2:在选择器指定的元素前后创建内容，该内容也包装到一个虚拟的容器中，并不存在与文档中，可以为容器添加样式
| Selector | Meaning | CSS |
|---|---|---|
| ::first-letter | 选择指定元素的第一个单词 | 1 |
| ::first-line | 选择指定元素的第一行 | 1 |
| ::after | 在指定元素的内容前面插入内容 | 2 |
| ::before | 在指定元素的内容后面插入内容 | 2 |
| ::selection | 选择指定元素中被用户选中的内容 | 3 |
伪类 CSS中的类（class）是为了方便过滤（即选择）元素，以给这类元素添加样式，class是定义在HTML文档树中的。
但是这在一些情况下是不够用的，比如用户的交互动作（悬停、激活等）会导致元素状态发生变化，class对这些动态变化无能为力。
伪类
| Selector | Meaning | CSS |
|---|---|---|
| :active | 选择正在被激活的元素 | 1 |
| :hover | 选择被鼠标悬浮着元素 | 1 |
| :link | 选择未被访问的元素 | 1 |
| :visited | 选择已被访问的元素 | 1 |
| :first-child | 选择满足是其父元素的第一个子元素的元素 | 2 |
| :lang | 选择带有指定 lang 属性的元素 | 2 |
| :focus | 选择拥有键盘输入焦点的元素 | 2 |
| :enable | 选择每个已启动的元素 | 3 |
| :disable | 选择每个已禁止的元素 | 3 |
| :checked | 选择每个被选中的元素 | 3 |
| :target | 选择当前的锚点元素 | 3 |
| :first-of-type | 选择满足是其父元素的第一个某类型子元素的元素 | 3 |
| :last-of-type | 选择满足是其父元素的最后一个某类型子元素的元素 | 3 |
| :only-of-type | 选择满足是其父元素的唯一一个某类型子元素的元素 | 3 |
| :nth-of-type(n) | 选择满足是其父元素的第n个某类型子元素的元素 | 3 |
| :nth-last-of-type(n) | 选择满足是其父元素的倒数第n个某类型的元素 | 3 |
| :only-child | 选择满足是其父元素的唯一一个子元素的元素 | 3 |
| :last-child | 选择满足是其父元素的最后一个元素的元素 | 3 |
| :nth-child(n) | 选择满足是其父元素的第n个子元素的元素 | 3 |
| :nth-last-child(n) | 选择满足是其父元素的倒数第n个子元素的元素 | 3 |
| :empty | 选择满足没有子元素的元素 | 3 |
| :in-range | 选择满足值在指定范围内的元素 | 3 |
| :out-of-range | 选择值不在指定范围内的元素 | 3 |
| :invalid | 选择满足值为无效值的元素 | 3 |
| :valid | 选择满足值为有效值的元素 | 3 |
| :not(selector) | 选择不满足selector的元素 | 3 |
| :optional | 选择为可选项的表单元素，即没有“required”属性 | 3 |
| :read-only | 选择有"readonly"的表单元素 | 3 |
| :read-write | 选择没有"readonly"的表单元素 | 3 |
| :root | 选择根元素 | 3 |
为此，CSS引入了伪类（pseudo-class）的概念用来支持根据文档树以外的信息来过滤元素的能力。
伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。
伪类是一个抽象类，本质上还是一个类，因此其主要作用仍然是用来选择元素而后设定具体的样式。
伪类的定义使用：单冒号加上名称，如 mydiv:hover。
伪类实际上是1：获取不存在与DOM树中的信息。比如<a>标签的:link、visited等，这些信息不存在与DOM树结构中，只能通过CSS选择器来获取，伪类选择元素的依据不是名称、属性或内容，而是根据特征（比如状态或顺序）。（:lang除外）2：不能被常规CSS选择器获取到的信息。:first-child;
伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
前面一节和本节内容分别详细讲述了伪类和伪元素的使用，我们应该已经大致理解了两者的异同点，这里再总结一下：
两者都不存在于HTML文档树中，都是为了支持依靠文档树之外的信息来进行格式化。
- 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
- 伪元素本质上是创建了一个有内容的虚拟容器；
- CSS3中伪类和伪元素的语法不同；
- 可以同时使用多个伪类，而只能同时使用一个伪元素；
-
伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的
id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。什么是伪类呢？简单点说，就是你没定义这个类，但它确实作为一个类来使用。 -
与伪类针对特殊状态的元素不同的是，
伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
简单理解，伪元素是可以设置content属性的，类似于标签，但是伪类只能设置样式不能设置内容