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精靈背景和選擇器

回答

相關問題