CSS Sprite Selector

Question

Ich versuche, CSS Sprite für die Reduzierung der Anzahl der Anfragen zu verwenden, aber ich habe ein Problem. In jedem Bereich werden alle 4 Symbole angezeigt.

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

Und mein 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> 

ich triend mit Selektoren zu spielen, aber ohne Ergebnis. Es scheint mir in Ordnung zu sein. Wie kann ich dieses Problem beheben? Vielen Dank.

Answer 1

Ihre Selektoren sind falsch, siehe this Geige, änderte ich nur die Selektoren. Da Ihre Selektoren nicht richtig waren, wurde nur das CSS für .sprite verwendet.

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