CSS精灵背景和选择器

非常感谢您提供任何帮助。我正在首次实施精灵，并期待精简我的代码。以下是我的CSS和HTML。CSS精灵背景和选择器

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并重复文本（如果不需要）。希望这是有道理的。再次感谢。

来源

2011-05-13 SWChiTownDev

最简单，最跨浏览器的方法是增加您的元素（<div class="Rating Rating0_5"></div>）的公共类，然后简单地改变div[class^='Rating']到.Rating。
您的其他可能的解决方案是在您的代码中修复selector specificity。简单地使用[class^='Rating']或者编写你的类选择器为div.Rating0_5。

来源

2011-05-13 13:41:34 kapa

有趣。感谢您的意见。我也会研究这一点。 – SWChiTownDev 2011-05-13 13:46:04

@ user752459请检查我的更新，第二个似乎是最简单的修复。 – kapa 2011-05-13 13:47:16

定义你的第一条规则是：

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，并且由于你的第一个选择器更多地被指定为你的背景位置选择器，它将覆盖它。

来源

2011-05-13 13:38:03 easwee

工作就像一个魅力，使完美的感觉。我很感激帮助。我会标记这是网站让我的答案。感谢easwee。 – SWChiTownDev 2011-05-13 13:41:46

@ user752459 Np - 很高兴。 – easwee 2011-05-13 13:43:01

CSS精灵背景和选择器

回答

相关问题