为什么我的 CSS Sprite 没有被应用？答案

【问题标题】：Why is my CSS Sprites not being applied?为什么我的 CSS Sprite 没有被应用？
【发布时间】：2017-07-22 07:45:26
【问题描述】：

我在我的代码中使用 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 对应的 CSS 规则会应用于图标。结果，所有图标都显示了精灵中的初始图标（计数为 0）。当我添加第二条规则时

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

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

【问题讨论】：

您能否为此设置一个Fiddle 或者我们可以检查一下online link。？
除非图像路径不正确，否则您的代码 codepen.io/anon/pen/WEedLm 似乎没有任何问题（我将您的 sn-ps 更新为一个单独的和图像路径）
在 sprite 中将所有图标放在一行中会使数学运算更简单。
感谢您的帮助！我在我的代码中正确使用了图像，但实际问题与我的 css 文件（molecularmatch-module.scss）中生成的规则名称有关，因为计数规则不等于我为元素（图标）设置的类名。现在解决了。

标签： html css css-sprites

【解决方案1】：

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

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

【讨论】：

感谢您的帮助！我在我的代码中正确使用了图像，但实际问题与我的 css 文件（molecularmatch-module.scss）中生成的规则名称有关，因为计数规则不等于我为元素（图标）设置的类名。现在解决了。
太棒了。就像我说的，计数类的使用方式有点错误。祝你的项目好运。