css伪类、伪元素

伪元素

创造关于文档语言能够指定的文档树之外的抽象。例如：
: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;
           }