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

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

它再次起作用。它只是 addClass 似乎没有得到尊重。谁能建议我如何让它与 addClass 一起工作？

Answer 1

我认为您对css 特异性有疑问，这意味着您的课程.yellow的特异性低于.ui-slider-horizontal .ui-slider-handle

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

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