使用<li>标签时Sprite图像不显示问题求助

使用<li>标签时，dice_2、dice_3、dice_4类的Sprite图像无法正常显示，但未使用Sprite的gem类图像显示正常。已尝试更换更大尺寸图像并重新制作Sprite，问题仍未解决。

提供的代码 #

HTML代码 #

<Tip class="tip">
   <article>
    <h1> Chamber</h1><hr>
    <ul>
    <li>
       <h3>  Enter  : </h3> 
       <div clsss="icon dice_3"></div>
       <div clsss="icon dice_4"></div>
    </li> 
    <li>
       <h3> Activate 1  </h3> 
       <div class="icon gem"></div> 
       <h3> : </h3> 
       <div clsss="icon dice_2"></div>
       <div clsss="icon dice_4"></div>
    </li>
    </ul>

CSS代码 #

.dice_2 {
    width: 25px; height: 25px;
    background: url('img/dice_icon.png') -25px -0;
}

.dice_3 {
    width: 25px; height: 25px;
    background: url('img/dice_icon.png') -50px -0;
}

.dice_4 {
    width: 25px; height: 25px;
    background: url('img/dice_icon.png') -75px -0;
}

.icon {
    transform: scale(0.50);
}
.gem {
    width: 21px;
    height: 30px;
    background: url('img/gem21x30.png');
}

问题原因及解决方案 #

核心问题是HTML属性拼写错误：所有对应dice_2、dice_3、dice_4的<div>标签里，你把class写成了clsss（少了一个字母a），导致CSS中的类选择器无法匹配到这些元素，自然不会应用Sprite样式，图像也就无法显示。而gem类的<div>是正确的class属性，所以能正常渲染。

修复步骤 #

把HTML中所有错误的clsss属性改成正确的class：

<!-- 修正后 -->
<div class="icon dice_3"></div>
<div class="icon dice_4"></div>
<div class="icon dice_2"></div>
<div class="icon dice_4"></div>

额外检查建议 #

1. 确认img/dice_icon.png的路径是否正确，可通过浏览器开发者工具查看资源是否加载成功。
2. CSS中背景位置的-0可以简化为0，不影响显示，但写法更规范：background: url('img/dice_icon.png') -25px 0;

内容的提问来源于stack exchange，提问作者user14518063