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

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');