vBulletin CSS和HTML

Question

我一直在尝试将我的用户排名图像设置为CSS精灵。到目前为止，我已经完成了以下代码:在additional.css中：

#ranks li {
    background: url(/rank-sprite.png) no-repeat top left;
}
.sprite-admin{ background-position: 0 0; width: 157px; height: 44px; } 
.sprite-banned{ background-position: -207px 0; width: 157px; height: 44px; } 
.sprite-bugabuser{ background-position: -414px 0; width: 157px; height: 44px; } 
.sprite-coder{ background-position: -621px 0; width: 157px; height: 44px; } 
.sprite-donator{ background-position: -828px 0; width: 157px; height: 44px; } 
.sprite-exdonator{ background-position: -1035px 0; width: 157px; height: 44px; } 
.sprite-hondonator{ background-position: -1242px 0; width: 157px; height: 44px; } 
.sprite-legdonator{ background-position: -1449px 0; width: 157px; height: 44px; } 
.sprite-member{ background-position: -1656px 0; width: 157px; height: 44px; } 
.sprite-middleman{ background-position: -1863px 0; width: 157px; height: 44px; } 
.sprite-moderator{ background-position: 0 -94px; width: 157px; height: 44px; } 
.sprite-mudkip{ background-position: -207px -94px; width: 150px; height: 50px; } 
.sprite-newcomer{ background-position: -407px -94px; width: 157px; height: 44px; } 
.sprite-pikachu{ background-position: -614px -94px; width: 150px; height: 50px; } 
.sprite-recoverer{ background-position: -814px -94px; width: 157px; height: 44px; } 
.sprite-robot{ background-position: -1021px -94px; width: 150px; height: 50px; } 
.sprite-snorlax{ background-position: -1221px -94px; width: 150px; height: 50px; } 
.sprite-superdonator{ background-position: -1421px -94px; width: 157px; height: 44px; } 
.sprite-unicorn{ background-position: -1628px -94px; width: 300px; height: 100px; }

对于实际排名：

但是它不起作用..它始终显示.sprite-admin{背景位置:0 0；宽度: 157px；高度: 44px；}一..这也是左上角的。

我做错什么了吗？或者这听起来像是和vBulletin有关吗？

谢谢

Answer 1

像这样写：

#ranks .sprite-admin{ background-position: 0 0; width: 157px; height: 44px; }

因为#ranks li的功能比单个类(.sprite-admin等)更强大。因此，我们必须增加sprite类的功能来覆盖属性。

或

你可以做其他的事情。像这样写：

li {
    background: url(https://data.bugabuse.net/images/sprites/rank-sprite.png) no-repeat top left;
}

而不是这样：

#ranks li {
    background: url(https://data.bugabuse.net/images/sprites/rank-sprite.png) no-repeat top left;
}

Answer 2

不设置背景位置排名li

#ranks li {
        background: url(https://data.bugabuse.net/images/sprites/rank-sprite.png) no-repeat;
    }