CSS 精灵选择器

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>

我试过选择器但没有结果。对我来说似乎没问题。我该如何解决这个问题？非常感谢。

Answer 1

你的选择器是错误的，参见 this fiddle，我只更改了选择器。因为您的选择器不正确，所以只使用了 .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;
}

CSS 精灵选择器

CSS Sprite Selector

html

css

css-sprites