0

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

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

DOM 检查员告诉我的内容被忽略了，取而代之的是 jQuery UI CSS。

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

最好的方法是什么？

4

2 回答 2

3

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

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

Using!important也可以处理这个问题，但它通常说是你不想使用的东西，除非真的没有办法绕过它。一个例子是如果你在一个元素上有内联样式，并且你想在你的样式表中胜过那些。内联样式得到1000分，这是不可能胜过的。

在此处阅读更多信息http://css-tricks.com/specifics-on-css-specificity/

于 2013-03-12T20:22:43.453 回答
0

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

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

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

于 2013-03-13T19:35:54.873 回答