Question

好的，理论上这应该是一个简单的，希望我只是遗漏了一些明显的东西。我有以下HTML标记：

<ul id="cPlayControlRack">
    <li class="cplaybutton"></li>
    <li class="CpauseButton CplayHidden"></li>
    <li class="CplaySkipBack"></li>
    <li class="CplaySkipForward"></li>
    <li class="CplayVolumeIcon"></li>
    <li class="CplayVolumeSlide"></li>
</ul>

以下CSS：

#cPlayControlRack{
    height:28px;
}
#cPlayControlRack li{
    width:29px !important;
    height:28px !important;
    background-image:url(background:url(i/playersprite.png);
    background-repeat:no-repeat;
    display:block;
}
.cplaybutton{background-position:0 0;}
.CpauseButton{background-position:30px 0;}
.CplaySkipBack{background-position:60px 0;}
.CplaySkipForward{background-position:90px 0;}
.CplayVolumeIcon{background-position:120px 0;}
.CplayVolumeSlide{background-position:150px 0;}

出于某种原因，第一条规则是匹配。 #cPlayControlRack使UL 28px变高。但是，没有其他规则匹配，因此没有显示精灵，并且没有给出高度或宽度。

JSFiddle：http://jsfiddle.net/4r2jm/

编辑：我的标记是动态生成的，而不是AFAIK会产生差异。

Answer 1

第7行有语法错误：

background-image:url(background:url(i/playersprite.png);

应该是：

background-image:url('i/playersprite.png');

CSS规则不匹配？为什么不？

1 个答案: