伪元素
创造关于文档语言能够指定的文档树之外的抽象。例如：
:before 在某元素之前插入某些内容
:after 在某元素之后插入某些内容
:first-letter 将样式添加到文本的首字母
:first-line 将样式添加到文本的首行
使用事例：
p:after{
content:'sss';
background-color: red;
}
效果是在每个p标签后面都会加上一段“sss”的内容，背景色为红色。
after还有一个作用，就是清除浮动。我们都知道可以在浮动的元素后面加个空的div，给这个空的div附上样式：clear:both，用这种方式清除元素；也可以用after来代替这个空的div，写成：
div:after{
clear:both;
}
伪类
基于特征来给元素分类而不是基于名字、属性等，原则上特征不能从文档树上推断得到。例如：
:active 将样式添加到被激活的元素
:focus 将样式添加到被选中的元素
:hover 当鼠标悬浮在元素上方时，向元素添加样式
:link 将样式添加到未被访问过的链接上
:visited 将样式添加到被访问过的链接上
active和focus有什么区别？
active是鼠标按下一瞬间的状态，鼠标抬起后瞬间消失；focus是鼠标按下后元素被激活的状态，鼠标抬起后不会瞬间消失。
当点击事件发生时active、focus、hover的顺序是怎么样的呢？
顺序是hover -> active -> focus
link、visited、hover使用时的顺序有哪些注意的地方？
link是将样式添加到未被访问过的链接上，visited是将样式添加到访问过的链接上，如果把这两个属性定义到hover的后面，则会把前面定义的hover状态的属性覆盖掉
例如：
a:hover{
color:blue;
}
a:link{
color:yellow;
}
a:visited{
color:red;
}
a标签未被访问过时是黄色，被访问过时是红色，但是鼠标移过时没有显示蓝色。这是因为鼠标移过时a标签同时拥有link/visited和hover的样式，定义在后面的会把定义在前面的覆盖。
正确的做法是把hover放在后面定义：
a:link{
color:yellow;
}
a:visited{
color:red;
}
a:hover{
color:blue;
}
