css - :hover background-postition problem

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;
}