jquery ui-slider-handle的嵌套類

Question

我想爲每個jquery滑塊vfm-slider和rating-slider分配不同的背景圖像。

下面是代碼

<div id="slider-content"> 
    <span>VFM</span> 
    <div class="vfm-slider"></div> 
    <input type="text" class="slider-value"/> 
    <div style="clear:both"></div> <span>Heart</span> 
    <div class="rating-slider"></div> 
    <input type="text" class="slider-value" /> 
</div> 

.ui-slider .ui-slider-handle { 
    background : url(http://findicons.com/files/icons/2015/24x24_free_application/24/heart.png) no-repeat scroll 50% 50% ; 
    border:none; 
    #content:"$"; 
    margin-top: -7px; 
    #margin-left: 10px; 
    font-size: 1.5em 

} 

http://jsfiddle.net/tven/JFdQs/

我如何做到這一點嗎？一般來說，我對jquery和css是新鮮的。這可能是一個非常直觀的方面來css類嵌套，但我現在無法繞過它的頭。任何幫助表示讚賞。

我已經嘗試將類名.vfm-slider與.ui-slider和.ui-slider-handle類結合使用。但我必須將後兩者嵌入前者之下。那是不可能的。

Answer 1

使用單獨的規則：

.vfm-slider.ui-slider .ui-slider-handle{ 
    background : url(heart.png) no-repeat scroll 50% 50%; 
} 
.rating-slider.ui-slider .ui-slider-handle{ 
    background : url(rating-image.png) no-repeat scroll 50% 50% 
} 

我已經更新的jsfiddle例子和它的作品有： http://tinyurl.com/a67nw67