CSSスプライトが適用されないのはなぜですか？

Question

私は自分のコードでCSSスプライトを使用しています。私が使用している背景イメージは次のとおりです。 HTML内

私は動的に整数値に基づいてアイコンを生成するのにspanを使用していた（カウント）し、その数に対応するアイコンは、ユーザーに表示されるべきです。ブラウザ上でこれを実行するとただしのみmolecularmatch-icon-image ruleに対応するCSSルールは、アイコンの上に適用され

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

。その結果、すべてのアイコンがスプライトに初期アイコン（count 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('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>