Question

提前感谢您提供任何帮助。我是第一次实现精灵，我希望简化我的代码。下面是我的CSS和HTML。

CSS

div[class^='Rating']
{ 
    background:url('http://10.0.50.19/images/Ratings.png') no-repeat;
    width:68px; 
    height:13px; 
    display:block;
}
.Rating0_5 { background-position: 0px 0px; }
.Rating1_0 { background-position: 0px -13px; }
.Rating1_5 { background-position: 0px -27px; }
.Rating2_0 { background-position: 0px -41px; }
.Rating2_5 { background-position: 0px -55px; }
.Rating3_0 { background-position: 0px -69px; }
.Rating3_5 { background-position: 0px -83px; }
.Rating4_0 { background-position: 0px -98px; }
.Rating4_5 { background-position: 0px -112px; }
.Rating5_0 { background-position: 0px -125px; }

HTML

<div class="Rating0_5"></div>
<div class="Rating1_0"></div>
....

我遇到的问题是背景位置始终设置为0px 0px因为我相信第一种风格会覆盖背景位置元素（根据Firebug）。如果我复制background:url('http://10.0.50.19/images/Ratings.png') no-repeat;复制到每个.RatingX_X样式，它可以正常工作，但我不想重复background-image并重复文本，如果我不需要。希望这是有道理的。再次感谢。

Answer 1

将您的第一条规则定义为：

div[class^='Rating']
{ 
    background-image:url('http://10.0.50.19/images/Ratings.png');
    background-repeat: no-repeat;
    width:68px; 
    height:13px; 
    display:block;
}

它应该有用。

在你的background:上你没有确定位置，所以它假设它在默认的0 0上，并且由于你的第一个选择器被更多地指定为你的背景位置选择器，它会覆盖。

Answer 2

最简单，最跨浏览的方式是在元素上添加公共类（<div class="Rating Rating0_5"></div>），然后只需将div[class^='Rating']更改为.Rating。
您的其他可能的解决方案是修复代码中的selector specificity。要么只使用[class^='Rating']，要么将您的班级选择器写为div.Rating0_5。

CSS sprites背景和选择器

2 个答案: