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