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