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

Question

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

内部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对应的CSS规则才会应用于图标。因此，所有图标都会在精灵中显示初始图标（计数0）。当我添加第二条规则时

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

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

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;