使用addClass进行JQUery UI元素自定义

Question

我通过为其句柄指定自定义样式来扩展JQuery UI滑块。

代码如下：

JavaScript的：

var slider = $("#container").slider();
var handle = $(".ui-slider-handle", slider);

然后我正在做

handle.css("backgroundColor","yellow");

有效。

但是当我创建一个类：

.yellow
{
   background-color: yellow;
}

并使用

  handle.addClass("yellow"); // works!

它不会捡起来。让我澄清一件事 - CSS位置是有效的，我的自定义CSS在之后 CSS应用，如果我通过编写来覆盖自定义CSS中的JQuery原始样式：

.ui-slider-horizontal .ui-slider-handle 
{ 
   background-color: yellow;    
}

它再次起作用。它只是addClass似乎并不值得尊敬。有人可以建议我如何使用addClass吗？

Answer 1

我认为您对css specificity有疑问，这意味着您的班级.yellow的特异性较低.ui-slider-horizontal .ui-slider-handle

一种解决方案是将特异性添加到黄色，这样它就不会像

那样被覆盖

.ui-slider-horizontal .ui-slider-handle.yellow {
background-color: yellow;
}