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