CSS Sprite Selector

Question

Я пытаюсь использовать css sprite для уменьшения количества запросов, но у меня проблема. В каждом элементе span отображаются все 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 скрипка, я только менял селекторов. Поскольку ваши селекторы были правы, использовался только css для .sprite.

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