# 伪类与伪元素
伪类
用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过
E:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。常见伪类：
:active、:hover、:checked、:is()、:not()、:has()。伪元素
用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过
E:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。常见伪元素：
::before、::after、::first-line、::first-letter。
# :befor(:after)和::before(::after)
设置在对象前或后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性。
CSS3将伪对象选择符（Pseudo-Element Selectors）前面的单个冒号:修改为双冒号::用以区别伪类选择符（Pseudo-Classes Selectors），但以前的写法仍然有效，即E:before可转化为E::before。本质上并不支持伪元素的双冒号::写法，而是忽略掉了其中的一个冒号，仍以单冒号来解析，所以等同变相支持了E::before。
IE10在使用伪元素动画有一个问题：
/* 需要使用一个空的:hover来激活 */
.test:hover {}
.test:hover::before { /* 这时animation和transition才生效 */ }
1
2
3
2
3