為什么我的CSS Sprites沒有被應用？

Question

我在代碼中使用CSS精靈。 以下是我使用的背景圖片。

在HTML內，我使用了span來基於整數值（計數）動態生成圖標，並且應該將與該計數相對應的圖標顯示給用戶。

 .molecularmatch-icon-image { width: 29px; height: 29px; line-height: 29px; display: block !important; } .molecularmatch-icon-image.count0 { background-position: -5px -0px; } .molecularmatch-icon-image.count1 { background-position: -34px -0px; } .molecularmatch-icon-image.count2 { background-position: -34px -34px; } .molecularmatch-icon-image.count3 { background-position: -63px -34px; } .molecularmatch-icon-image.count4 { background-position: -5px -68px; } .molecularmatch-icon-image.count5 { background-position: -34px -68px; } .molecularmatch-icon-image.count6 { background-position: -63px -68px; } .molecularmatch-icon-image.count7 { background-position: -5px -102px; } .molecularmatch-icon-image.count8 { background-position: -34px -102px; } .molecularmatch-icon-image.count9 { background-position: -63px -102px; } .molecularmatch-icon-image.count10 { background-position: -63px -0px; } .molecularmatch-icon-image.countexceed-10 { background-position: -5px -34px; } 

 <span> <span class="annotation-module__annotation-item__1DwWp"> <i class="molecularmatch-icon-image count7" data-test="molecularmatch-icon-image" style="background-image: url(https://i.stack.imgur.com/nTR2u.png);"> </i> </span> </span> 

但是，在瀏覽器上運行此molecularmatch-icon-image rule時，僅將與molecularmatch-icon-image rule規則相對應的CSS規則應用於圖標。 結果，所有圖標都在sprite中顯示初始圖標（計數0）。 當我添加第二條規則時

.molecularmatch-icon-image.count7 {
  background-position: -5px -102px;
}

使用瀏覽器的開發人員工具似乎可以正常工作。 有人可以告訴我我在做什么錯嗎？

Answer 1

您沒有在CSS中使用圖片，並且使用count類的方式有些錯誤。 請看下面。

 .molecularmatch-icon-image { width: 29px; height: 29px; line-height: 29px; display: block; background-image: url('https://i.stack.imgur.com/nTR2u.png'); background-position: 0 0; } .count0 { background-position: -5px -0px; } .count1 { background-position: -34px -0px; } .count2 { background-position: -34px -34px; } .count3 { background-position: -63px -34px; } .count4 { background-position: -5px -68px; } .count5 { background-position: -34px -68px; } .count6 { background-position: -63px -68px; } count7 { background-position: -5px -102px; } .count8 { background-position: -34px -102px; } .count9 { background-position: -63px -102px; } .molecularmatch-icon-image.count10 { background-position: -63px -0px; } .molecularmatch-icon-image.countexceed-10 { background-position: -5px -34px; } 

 <span class="molecularmatch-icon-image count7"></span> <i class="molecularmatch-icon-image count5"></i>