CSS精靈背景和選擇器

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>
....

我遇到的問題是背景位置始終設置為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 。

• 您可能的其他解決方案是修復代碼中的選擇器特異性 。 只需使用[class^='Rating']或將您的類選擇器編寫為div.Rating0_5 。