Question

我正在尝试缩小jQuery UI滑块小部件的句柄。我创建了这个CSS：

.ui-slider-handle {
    width: 10px;
}

DOM检查员告诉我的内容被忽略，支持jQuery UI CSS。

我怎样才能给予我更高的优先权？对滑块句柄进行ID识别的唯一方法，因为它是由jQuery函数（.slider（）创建的，并且实际上不在.html文件中），是使用代码在之后为其分配ID 使用jQuery，然后希望CSS适用，或者手动添加带代码的width属性。这些看起来很不优雅。

最好的方法是什么？

Answer 1

它被jQuery UI的CSS覆盖，因为它有更多specificity。如果您查看他们拥有的代码，您只需要拥有更多代码，它将覆盖它。

html body .ui-slider .ui-slider-handle {} 
/* the added points from html & body, will trump jQuery UI's rule */

使用!important也会处理此问题，但通常表示你不想使用，除非真的没办法绕过它。例如，如果元素上有内联样式，并且想要在样式表中使用内联样式。内联样式被赋予 1000 点，这是不可能的。

Answer 2

如果你足够努力，你可以手动覆盖自己CSS中的任何JQuery或JQueryUI默认样式。但是，这样做有几个问题：

正如您所发现的那样，级联使默认CSS优先（可能是令人惊讶的）方式，因此您必须使用诸如!important之类的黑客攻击，或选择器中的冗余标记，例如{{ 1}} html - 确保您的风格＆＃34;击败＆＃34; JQuery的＆＃39; S
更有问题的是，许多小部件，Menu是主要罪犯（但还有其他小部件），在初始化时动态创建新的选择器。要覆盖那些样式，在编写JS之后必须在页面上使用Firebug或类似工具来找出新的选择器名称并将它们添加到样式表中。

正确的做法是使用ThemeRoller工具创建一个自定义CSS＆＃34;捆绑＆＃34;一次改变所有样式。奖励：既然您可以看到自定义样式同时影响所有窗口小部件，那么为页面创建统一外观会更容易。