之前遇到一个问题：li:hover::after 可行，li::after:hover不可行，去查了一些相关资料，下面记录一下相关的笔记和自己的理解。
1.首先明白二个概念： selector 和simple selector
在css3文档中有定义
A selector is a chain of one or more sequences of simple selectors separated by combinators. One pseudo-element may be appended to the last sequence of simple selectors in a selector. A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator. It always begins with a type selector or a universal selector. No other type selector or universal selector is allowed in the sequence. A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.
从中可以看出，一个selector实际上就是simple selectors组成的序列链，并且，一个伪元素可以出现在最后的simple selectors序列的尾部。这句话是重点，如果我没有理解错，那么其实这个话就已经是我之前那个问题的答案了：伪元素如果存在，那么必须在尾部。
2.再来看看到底什么是伪类，什么是伪元素
css3中定义：
明确几点：
1）伪元素和伪类都是在文档树之外的；
2）伪元素就是一个抽象的元素（相当于创建抽象的文档流，不扰乱实际文档本身），它的作用就是实现文档语言不提供的一些机制作用，也就是将特殊的效果添加到某些选择器上；而伪类就是允许选择文档树外的信息或者其他simple selector不能来表达的信息（翻译的不好o(╯□╰)o），也就是向某些选择器增加一些特殊的效果。
3）css3中的规定是 伪元素用::2个冒号 ， 而伪类用:一个冒号。
4）伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要增加一个新的实际的元素才能实现。
3.类型（类似的就不写了）
（1）伪类：
| 属性 | 描述 | CSS |
|---|---|---|
| :active | 向被激活的元素添加样式。 | 1 |
| :focus | 向拥有键盘输入焦点的元素添加样式。 | 2 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式。 | 1 |
| :link | 向未被访问的链接添加样式。 | 1 |
| :visited | 向已被访问的链接添加样式。 | 1 |
| :lang |
向带有指定 lang 属性的元素添加样式。 |
2 |
| :first-child | 向元素的第一个子元素添加样式。 | 2 |
| :nth-of-type(n) | 父元素中指定类型的子元素 | |
| :only-of-type | 选择父元素的某类子元素是独生子的元素 | |
| :enabled | 可用的表单元素 | |
| :target | 选取当前活动的目标元素 | |
| :not(X) | 除...之外的元素 | |
| :empty | 没有任何内容的元素 | |
| :ready-only | 用来指定处于只读状态的元素 |
3 |
| 属性 | 描述 | CSS |
|---|---|---|
| :first-letter | 向文本的第一个字母添加特殊样式。 | 1 |
| :first-line | 向文本的首行添加特殊样式。 | 1 |
| :before | 在元素之前添加内容。 | 2 |
| :after | 在元素之后添加内容。 | 2 |
| :selection | 定义鼠标选中文本样式 |
3 |
欢迎补充纠正~~♪(^∇^*)