覆盖默认的jquery css？答案

【问题标题】：Overriding default jquery css?覆盖默认的jquery css？
【发布时间】：2013-03-12 20:20:32
【问题描述】：

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

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

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

我怎样才能让我的优先级更高？标识滑块句柄的唯一方法，因为它是由 jQuery 函数 (.slider()) 生成的，并且实际上不在 .html 文件中，所以使用代码为它分配一个 ID after已经用 jQuery 制作，然后希望 CSS 应用，或者手动添加宽度属性与代码。这些看起来并不优雅。

最好的方法是什么？

【问题讨论】：

【解决方案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 分，这是不可能胜过的。

【讨论】：

【解决方案2】：

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

正如您所发现的那样，级联使默认 CSS 以（可能令人惊讶的）方式优先，因此您必须使用 hacks（如 !important）或选择器中的冗余标签（如 html body --以确保您的样式“击败” JQuery。
更成问题的是，许多小部件（Menu 是主要违规者）（但还有其他小部件）在初始化时会动态创建新的选择器。要覆盖那些样式，您必须在编写 JS 后在页面上使用 Firebug 或类似工具来找出新的选择器名称并将它们也添加到您的样式表中。

正确的做法是使用ThemeRoller 工具创建一个自定义CSS“包”，一次更改所有样式。奖励：由于您可以同时查看自定义样式如何影响所有小部件，因此更容易为您的页面创建统一的外观。

【讨论】：