使用 addClass 自定义 JQUery UI 元素

Question

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

代码如下:

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 在 JQuery CSS 之后 应用，如果我通过编写覆盖自定义 CSS 中的 JQuery 原始样式:

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

它又工作了。只是 addClass 似乎没有受到尊重。任何人都可以建议我如何让它与 addClass 一起工作吗？

Answer 1

我认为您对 css specificity 有疑问这意味着您的类(class) .yellow 的特异性低于 .ui-slider-horizo​​ntal .ui-slider-handle

一个解决方案是为黄色添加特殊性，这样它就不会被覆盖

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