原文链接：CSS伪类与伪元素完全指南
1，概念
伪类
伪类就是某个元素的一种虚拟状态，或者说一种特有的性质，这种状态或性可以通过CSS捕捉到。
伪类是一个冒号（:）后跟伪类的名字构成的，有时候名字后面还会有一个放在括号里的值。
伪元素
伪元素是一种虚拟的元素，CSS把它当成普通HTML元素看待。但它们在文档树或DOM中并不实际存在，只会通过CSS来创建伪元素。
伪元素是一个冒号还是两个冒号？
建议使用单冒号表示法，原因也是向后兼容。
正确使用生成的内容（content）
通过CSS生成内容需要用到CSS属性 content 和伪元素 :before 或 :after。
其中的“内容”（content）可是纯文本，也可以是一个容器，通过CSS操作来显示某种图形或者装饰性元素。
CSS生成的内容只适用于装饰性、不重要的内容，但也要确保屏幕阅读器能够适当处理它，让使用这些辅助技术的用户不至于分心。这里适用“渐进增强”原则。
实验性的伪类和伪元素
实验性的伪类和伪元素，指的是那些不稳定或没最终定案的伪类和伪元素。它们的语法和行为还可能有变。
不过，加上厂商前缀就可以使用这些实验性的伪类和伪元素。
2，伪类
状态伪类
状态伪类通常出现在用户执行某个操作的情况下。在CSS里，“操作”也可以是“无操作”，比如尚未点过的链接。
:hover 必须位于 :link 和 :visited 之后，:active 必须位于 :hover 之后。
所以，推荐的书写顺序为：:link、:visited、:hover、:active。
a:link 可以省略成 a。
:hover 可用于 a 以外的元素。
:active 选择被鼠标指针或触摸操作“激活的” 元素。
:focus 用于选择已经通过指针设备、触摸或键盘获得焦点的元素。
:active 与 :focus 的区别在于 :active 只发生在鼠标被按下到被释放的这段时间里。
:focus 和 :active 的声明通常在一块，当然也可以给它们分开。
注意这个 Mixin 不仅仅适用于链接，而是适用于任何 HTML元素。
结构化伪类
结构化伪类选择通过其他选择符无法选择的文档树或DOM中的其他信息。
E:*-child 和 E:*-of-type 之间的区别：
E:*-child 在满足 条件（*-child） 且 满足 条件（E）的情况下，才会生效。
E:*-of-type 在满足 条件（E） 的结果集里寻找满足条件 （*-of-type）的元素。
:not 通过括号接受一个参数，可以是一个“选择符”，也可以是另一个伪类。可以连缀使用，不能嵌套使用。
:nth-child 根据元素在标记中的次序选择相应的元素。
:nth-last-child 除了是从后往前选择元素，跟 :nth-child 完全一样。
:nth-of-type 与 :nth-child 类似，主要区别是它更具体了，可以只针对特定类型的元素。
:nth-last-of-type 是从后往前数，其余跟 :nth-of-type 一样。
所有 :nth 都接受一个参数，这个参数是一个公式。
公式可以是一个整数，或者关键字odd、even，或者形如an+b的结构。
对于an+b：
a（间隔基数，是一个整数）
n（间隔步长，从 0 开始）
+ （运算符，可以是加号+或减号-）
b（起始值，也是一个整数，但只有使用了运算符的时候才会用到）
参考文章：
1，“CSS3 Structural Pseudo-Class Selector Tester” Lea Verou
2，“:nth Tester” CSS-Tricks
:only-child 选择父元素中唯一的子元素。
:only-of-type 选择同级中类型唯一的元素，与 :only-child 类似，但针对特定类型的元素时，让选择符有了更强的意义。
:target 伪类 通过元素的ID及URL中的锚名称选择元素。
验证伪类
验证伪类也可以用于其他HTML元素。
:checked 选择被勾选或选中的单选按钮、多选按钮及列表选项。
:default 从表单中一组类似元素里选择默认的元素（即“提交”按钮。——译者注）。
如果要选择表单中没有类的默认按钮，可以使用 :default。
注意：在表单中使用 Reset 或 Clear 按钮会招致严重的可用性问题，慎用。
参考文章：
“Reset and Cancel Buttons,” Nielsen Norman Group (2000)
“Killing the Cancel Button on Forms for Good,” UX Movement (2010)
:enabled 选择启用的元素。
所有表单元素默认都是启用的，除非在标记中添加了disabled 属性。
:disabled 选择禁用状态的表单元素。
处于禁用状态的元素，不能被选中、勾选，不能获得焦点。
通过 :enabled 和 :disabled 可以提供视觉上的反馈，改善用户体验。
:empty 选择其中不包含任何内容的空元素。
只要包含一个字母、其他HTML元素，甚至一个空格，都不算空。
:in-range 选择有范围且值在指定范围内的元素。
:out-of-range 选择有范围且值超出指定范围的元素。
:indeterminate 选择单选按钮或复选框在页面加载时没有被勾选的。
两种情况：
一组单选按钮中没有默认或预先勾选的，
一个复选框已经通过 JavaScript 设置为 indeterminate = true 状态。
:valid 选择输入格式符合要求的表单元素。
:invalid 选择输入格式不符合要求的表单元素。
:optional 选择表单中非必填的输入字段。
只要输入字段中没有 required 属性，就会被 :optional 选中。
:required 选择有 required 属性的表单元素。
:read-only 选择用户不能编辑的元素。
与 :disabled 伪类相似，标记中使用的属性决定了使用哪个伪类。
:read-write 选择用户可以编辑的元素。
适用于有 contenteditable 属性的HTML元素。
:scope 适用于 style 标签中有 scoped 属性的情形。
如果页面中某一部分的 style 标签里没有 scoped 属性，那么 :scope 会一直向上查找，直到 html 元素，即当前样式表的默认作用范围。
语言伪类
:dir 选择文档中指定了语言方向的元素。
为了使用 :dir，需要在标记中为相关元素指定dir属性。
:lang 选择的元素通过lang=””属性、相应的 meta 元素以及 HTTP 头部的协议信息来确定。
其他伪类
:root 选择文档中最高层次的父元素。
在HTML中，:root 选择的就是 html 元素。但在SVG或XML等标记语言中，它可能选择不同的元素。
注意：使用html也可以设置相同的样式，但 :root 是一个类，拥有比元素选择符（即html）更高的特指度。
:fullscreen 选择在全屏模式下显示的元素。
只适用于通过 JavaScript Fullscreen API 切换进入的全屏模式，通常由父容器中的图片、视频或游戏来调用。
使用 :fullscreen 前必须知道，浏览器应用样式的方式差别很大。
而且，不仅要在CSS中使用前缀，JavaScript中也一样。
推荐使用Hernan Rajchert的screenfull.js，它帮我们填了不少浏览器的“坑”。
伪元素
伪元素类似一种虚拟元素，可以将其视为普通的HTML元素。
但伪元素并不存在于文档树或DOM中，因此不能在HTML中输入，只能通过CSS创建。
:after(::after) 和 :before(::before) 用于为其他HTML元素添加内容（文本或图形）。
只能用于能添加内容的HTML元素。为什么input不支持伪元素(:after,:before)？
这里的内容并不实际存在于DOM中，但可以像存在一样操作它们。
使用这个伪元素，必须在CSS中声明 content 属性。
通过这个伪元素添加的任何内容都无法通过其他选择符选中。
::backdrop 是在全屏元素后面生成的一个盒子，与 :fullscreen 连用，修改全屏后元素的背景颜色。
注意： ::backdrop 必须用双冒号。
:first-letter(::first-letter) 选择一行文本第一个字符。
如果相应行前面包含图片、视频或表格元素，那么不会影响选择第一个字符。
注意：这个伪元素也可以选中 :before 生成的第一个字符。
:first-line(::first-line) 选择元素的第一行，只适用于块级元素，行内元素不适用。
::selection 选择文档中被高亮选中的部分。
注意：基于Gecko的浏览器要求使用 ::-moz-selection。 带前缀和不带前缀的 ::selection 要分别写。
::placeholder 选择表单元素中通过 placeholder 属性设置的占位文本，也可以写成 ::input-placeholder。
注意：这个伪元素不是标准的。
兼容性写法：
1 | input::-moz-placeholder { |