a:悬停背景 - 邮寄问题

Question

出于某种原因,我不完全确定原因,但以下是行不通的.悬停时背景位置保持不变.我无法弄清楚为什么.我可以用另一种方式做到,但我想尝试找到它为什么不起作用的底部.

#nav a:link, #nav a:visited {
    background:url(../img/nav-sprite.png) no-repeat;
    display:block;
    float:left;
    height:200px;
    padding:10px;
    text-indent:-9999px;
    border:solid 1px red;
}

    #nav a#home {
        background-position:-10px 0px;
        width:30px;
    }
    #nav a#about-us {
        background-position:-85px 0px;
        width:45px;
    }

#nav a:hover    {
    background-position:1px -15px;
}

有人知道是什么原因引起的吗？

提前致谢!

瑞安

Answer 1

ID选择器优先于伪类选择器.

因此#规则不会被:规则覆盖..

要么使用!important指令

#nav a:hover    {
    background-position:1px -15px!important;
}

或使规则更具体

#nav a#home:hover, #nav a#about-us:hover    {
    background-position:1px -15px;
}