提到 css 的hover 选择器，想必大家都不陌生（:hover 用于设置鼠标指向某元素上后显示的样式）

　　 除了常用的 hover 选择器，还有3个可以和它搭配使用的选择器：

　　:link 设置未被访问页面的链接

　　:visited 用于设置已被访问的页面链接

　　:active 用于活动链接

 

　　一般 hover 某元素后，应该会显示设置的样式，如下面的"点我"。鼠标指上去后会显示设置的样式，这里为字体变成红色

　　

 

　　问题：最近遇到一个问题，hover 以后的样式怎么都不生效，代码如下

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            a:hover {
                color: red;
            }
            a:link {
                color: #000;
            }
            
            a:visited {
                color: #ccc;
            }
            
            a:active {
                color: blue;
            }
            
            a {
                font-size: 30px;
            }
        </style>
    </head>

    <body>
        <a href="#">点我</a>
    </body>

</html>

 

　　开始我以为是代码写错了，仔细检查后，发现代码并没有错，这令我十分费解

　　后来无意中在w3c找到了答案，以前完全没有注意的一句话：

　　注：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效

 

　　这时候在看我上面的代码，hover 写在 link 和 visited 的前面，此刻茅塞顿开，修改后的代码如下　　

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            a:link {
                color: #000;
            }
            a:visited {
                color:#ccc ;
            }
            a:hover {
                color: red;
            }
            a:active {
                color: blue;
            }
        </style>
    </head>
    <body>
        <!--被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）-->
        <a href="#">点我</a>
    </body>
</html>

 

有需要的朋友可以领取支付宝到店红包，能省一点是一点