伪类？伪元素？
之前一度认为伪类就是一组选择器，伪元素是不在DOM树的中的一些元素。但是当我看完MDN上的所有伪类与伪元素之后，才发现伪类与伪元素同属于CSS选择器的范畴，而伪元素其特殊之处在于伪元素可以选择的是一些不在DOM树中的元素，比如::selection用于选中用户用鼠标勾选的字符串；当然也可以选择在DOM树中的元素，比如::first-line用于选中元素的第一行，在特殊一点说，伪元素多用于选择一些特殊的东西，而伪类用于元素级别的选择，比如:nth:child用于选择某元素的第n个
伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。
伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的HTML元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号::。
实际上最好的方法就是记住伪类与伪元素主要有哪些、特别是伪元素并不多。
伪类
状态伪类
| 选择器 | 示例 | 说明 |
|---|---|---|
| :link | a:link | 选择所有未访问的链接 |
| :visited | a:visited | 选择所有访问过的链接 |
| :hover | a:hover | 鼠标悬浮在链接上的状态 |
| :active | a:active | 选择在激活状态的链接 |
| :focus | input:focus | 选择获取焦点的输入框元素 |
| :focus-within | form:focus-within | 用在父级元素上，当子元素获得焦点时，父元素获得对应属性(IE未实现) |
结构化伪类
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| :first-child | p:first-child | 匹配一组兄弟元素中的第一个元素。（如果这个元素是p，就被匹配，否则不会被匹配。） |
| :first-of-type | p:first-of-type | 匹配一组兄弟元素中其类型的第一个元素。（即使第一个不是p，也会一次向下检索，直到找到这个p。） |
| :last-child | p:last-child | 匹配一组兄弟元素中的最后一个元素。（如果这个元素是p，就被匹配，否则不会被匹配。） |
| :last-of-type | p:last-of-type | 匹配一组兄弟元素中其类型的最后一个元素。（即使最后一个不是p，也会一次向上检索，直到找到这个p。） |
| :not(selector) | :not(p) | 选择所有p以外的元素（不支持伪类嵌套） |
| :nth-child(n) | li:nth-child(2n+1) | 首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3…）。 样例中即匹配所有奇数项的标签（注意所有的兄弟标签都会被算进去，即使不是li标签） |
| :nth-last-child(n) | p:nth-last-child(2) | 匹配一列兄弟元素，从后往前倒数。兄弟元素按照an+b形式的式子进行匹配（比如2n+1匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。（与上面相同，只是从后往前数） |
| :nth-of-type(n) | p:nth-of-type(2) | 匹配某种类型的一列兄弟元素（比如，<p>元素）——兄弟元素按照an+b形式的式子进行匹配（比如2n+1匹配元素1、3、5、7等。即所有的奇数个）。 |
| :nth-last-of-type(n) | p:nth-last-of-type(2n+1) | 匹配某种类型的一列兄弟元素（比如，<p>元素）——兄弟元素按照an+b形式的式子进行从后向前匹配（比如2n+1匹配元素1、3、5、7等。即所有的奇数个）。（与前面的类似，只是方向是从后往前数） 样例意思是匹配所有父元素下，是奇数位置的p元素。 |
| :only-of-type | p:only-of-type | 匹配兄弟元素中某类型仅有的元素。 样例即为选择一个p元素，其兄弟元素都不是p元素。 |
| :only-child | p:only-child | 匹配没有兄弟元素的元素。 |
| :target | #news:target | 匹配当前URL目标的元素（含锚点）。 |
表单伪类
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| :disabled | input:disabled | 选择所有被禁用的元素。 |
| :enabled | input:enabled | 选择所有被启用的（enabled）元素。 |
| :required | input:required | 选择设置 required 属性的表单元素 |
| :read-only | input:read-only | 选择设置 readonly 只读属性的元素 |
| :read-write | input:read-write | 选择处于编辑状态的元素；input，textarea 和设置 contenteditable 的 HTML 元素获取焦点时即处于编辑状态。 |
| :checked | input:checked | 匹配被选中的 input 元素，input 元素包括 radio 和 checkbox |
| :empty | p:empty | 匹配所有没有子元素的 p 元素 |
| :in-range | input:in-range | 选择在指定区域内的元素 |
| :out-of-range | input:out-of-range | 选择不在指定区域内的元素 |
| :valid | input:valid | 选择条件验证正确的表单元素 |
| :invalid | input:invalid | 选择条件验证错误的表单元素 |
| :optional | input:optional | 选择没有 required 属性，即设置 optional 属性的表单元素 |
| :default | - | 匹配默认选中的元素(提交按钮总是表单的默认按钮)。 |
| :indeterminate | - | 当某组中的单选框或复选框还没有选取状态时，:indeterminate 匹配该组中所有的单选框或复选框。 |
| :scope | - | 匹配处于 style 作用域下的元素。当 style 没有设置 scope 属性时，style 内的样式会对整个 html 起作用。(试验阶段) |
| :root | :root | 匹配文档树的根元素。 |
伪元素
单双冒号
| 选择器 | 作用 | 说明 |
|---|---|---|
| ::before/:before | 在被选元素前插入内容。 | 需要使用 content 属性来指定要插入的内容。被插入的内容实际上不在文档树中。 |
| ::after/:after | 在选被元素后插入内容 | 其用法和特性与:before相似。 |
| ::first-letter/:first-letter | 匹配元素中文本的首字母。 | 匹配元素的第一个字母。 |
| ::first-line/:first-line | 匹配元素中第一行的文本。 | 匹配包含此伪元素的元素的第一行。 |
双冒号
| 选择器 | 作用 | 说明 |
|---|---|---|
| ::selection | 匹配被用户选中或者处于高亮状态的部分. | 在火狐浏览器使用时需要添加 -moz 前缀。 |
| ::placeholder | 匹配占位符的文本。 | 只有元素设置了 placeholder 属性时，该伪元素才能生效。 |
LAST
对于伪类与伪元素，最好的不是区分它们，而是记住常用的选择器是属于伪类还是伪元素。