html - 为什么我的 CSS Sprites 没有被应用？

Question

我在我的代码中使用了 CSS Sprite 。以下是我使用的背景图片。

在 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(/image/nTR2u.png);">
  </i>
  </span>
</span>

但是，当在浏览器上运行时，只有对应于 molecularmatch-icon-image rule 的 CSS 规则才会应用到图标上。结果，所有图标都显示 Sprite 中的初始图标(计数 0)。当我添加第二条规则时

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

使用浏览器的开发者工具似乎可以正常工作。谁能告诉我我在这里做错了什么？

Answer 1

您没有在 CSS 中使用图像，并且计数类的使用方式略有错误。请看下面。

.molecularmatch-icon-image {
  width: 29px;
  height: 29px;
  line-height: 29px;
  display: block;
  background-image: url('/image/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>