如何使用不同的图像每个JQuery用户界面滑块处理

Question

我使用它有两个把手一个jQuery UI滑块（a.k.a 范围滑块）。我知道如何style the first handle：

.ui-slider-horizontal .ui-slider-handle {background: white url(https://stackoverflow.com/content/img/so/vote-arrow-down.png) no-repeat scroll 50% 50%;} 

但我如何设计不同的第二个句柄？

用Firebug我可以看到jQuery的不唯一标识每个手柄：

<div id="hourlyRateSlider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"> 
<div class="ui-slider-range ui-widget-header" style="left: 26%; width: 46%;"/> 
<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 26%;"/> 
<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 72%;"/> 
</div> 

所以我想我必须使用一个CSS子选择这可能是跨浏览器的问题。或者，我可以使用一些JQuery的挂羊头卖狗肉的CSS类添加到第二把手？在任何人面前一个整洁的方式做到了这一点？

Answer 1

$(window).load(function(){ 
    handle = $('#slider A.ui-slider-handle');   
    handle.eq(0).addClass('first-handle');   
    handle.eq(1).addClass('second-handle'); 
}); 

Answer 2

CSS：

#hourlyRateSlider a:last-child {}