前端学习 -- Css -- 伪类

伪类和伪元素用来表示元素所处的一个特殊的状态，或者是一个特殊的位置

比如：访问过的超链接，比如普通的超链接，比如获取焦点的文本框当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类

为没访问过的链接设置一个颜色为绿色

:link 表示普通的链接（没访问过的链接）。
:visited 表示访问过的链接，浏览器是通过历史记录来判断一个链接是否访问过,由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色。
:hover 伪类表示鼠标移入的状态。
:active 表示的是超链接被点击的状态，:hover和:active也可以为其他元素设置，IE6中，不支持对超链接以外的元素设置:hover和:active。
::selection为类选中的内容使用样式，注意：这个伪类在火狐中需要采用另一种方式编写::-moz-selection。

demo:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        /**
         * 没有访问的
         */
        
        a:link {
            color: red;
        }
        /*
         * 访问过的
         */
        
        a:visited {
            color: black;
        }
        /*鼠标移入的时候
         * 
         */
        
        a:hover {
            color: yellow;
        }
        /**
         * 点击超链接的时候的颜色
         */
        
        a:active {
            color: blue;
        }
        /**
         * 选中文字的时候背景颜色变为红色
         */
        
        h1:selection {
            background-color: red;
        }
    </style>

    <body>
        <a href="http://http://www.cnblogs.com/androidsuperman/p/6545291.html">访问过的链接</a>
        <br/>
        <a href="http://www.cnblogs.com/androidsuperman/p/6563756.html">没有访问过的链接</a>
        <h1>选中文字的时候的颜色</h1>
    </body>

</html>

效果：

没有访问的：

访问过的：

鼠标移入：

伪类的优先级

顺序依次是：

:link；
:visited；
:hover；
:active；

:link，:visited可以交换位置，但是位置不能放到:hover，:active后面。

:hover:active不可以交换位置。

当然最好按照如上1,2,3,4的顺序去进行代码编写