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