CSS sprites 背景和选择器答案

【问题标题】：CSS sprites background and selectorsCSS sprites 背景和选择器
【发布时间】：2026-01-16 18:25:01
【问题描述】：

提前感谢您提供的任何帮助。我是第一次实现精灵，并希望简化我的代码。下面是我的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 并在不需要时重复文本。希望这是有道理的。再次感谢。

【问题讨论】：

标签： html css css-selectors css-sprites

【解决方案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 上，并且由于您的第一个选择器被更多地指定为您的背景位置选择器，因此它会覆盖。

【讨论】：

像魅力一样工作，非常有意义。我很感激帮助。一旦网站允许我，我将标记这是答案。谢谢易烊千玺。
@user752459 Np - 很高兴。

【解决方案2】：

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

【讨论】：

有趣。感谢您的输入。我也会对此进行调查。
@user752459 请检查我的更新，第二个似乎是最简单的修复。