CSS雪碧選擇器

Question

我想使用CSS精靈來減少請求計數，但我有問題。在每個跨度元素中都顯示了所有4個圖標。

.sprite { 
    background-image: url("img/spritesheet.png"); 
    background-repeat: no-repeat; 
    display: block; 
} 
.sd-tabber .sdt-nav li span.episodes:before{ 
    width: 16px; 
    height: 16px; 
    background-position: -31px -5px; 
} 

.sd-tabber .sdt-nav li span.reviews:before{ 
    width: 16px; 
    height: 16px; 
    background-position: -5px -31px; 
} 

.sd-tabber .sdt-nav li span.forum:before{ 
    width: 16px; 
    height: 16px; 
    background-position: -5px -31px; 
} 

.sd-tabber .sdt-nav li span.wallpapers:before{ 
    width: 16px; 
    height: 16px; 
    background-position: -31px -31px; 
} 

.sd-tabber .sdt-nav li span.cast:before{ 
    width: 16px; 
    height: 16px; 
    background-position: -5px -5px; 
} 

而我的HTML

<div class="sd-tabber tnTabber"> 
    <ul id="dizi-ul" class="sdt-nav tnNav"> 
      <li class="active"><span class="episodes">Bölümler</span></li> 
      <li><span class="sprite reviews">Yorumlar</span></li> 
      <li><span class="sprite wallpapers">Resimler</span></li> 
      <li><span class="sprite cast">Oyuncular</span></li> 
      <li><span class="sprite forum">İncemeler</span></li> 
     </ul> 
</div> 

我triend與選擇，但沒有結果玩。對我來說似乎沒問題。我該如何解決這個問題？非常感謝。

Answer 1

您的選擇器是錯誤的， 看到this小提琴，我只改變了選擇器。因爲你的選擇器只能使用.sprite的css。

.sprite { 
    background-image: url("http://img01.deviantart.net/0adf/i/2012/279/6/6/zero_sprite_sheet_small_update_by_xxxzero8-d5h03st.png"); 
    display: block; 
} 
.reviews{ 
    width: 16px; 
    height: 16px; 
    background-position: -31px -5px; 
} 

.wallpapers{ 
    width: 16px; 
    height: 16px; 
    background-position: -5px -31px; 
} 

.cast{ 
    width: 16px; 
    height: 16px; 
    background-position: -5px -31px; 
} 

.forum{ 
    width: 16px; 
    height: 16px; 
    background-position: -31px -31px; 
}