html - CSS sprites 背景和选择器

Question

提前感谢您提供的任何帮助。我是第一次实现 sprite，并希望简化我的代码。下面是我的 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>
....

我遇到的问题是 background-position 总是被设置为 0px 0px 因为我相信第一个样式会覆盖 background-position 元素(根据 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 上，并且由于您的第一个选择器被更指定为它覆盖的背景位置选择器。