覆盖默认的jQuery css？

我想缩小jQuery UI滑块小部件的句柄。我创建了这个CSS：覆盖默认的jQuery css？

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

DOM检查器告诉我的哪个部分被忽略，以支持jQuery UI CSS。

我该如何给我的优先权？通过jQuery函数（.slider（））创建滑块句柄并且实际上不在.html文件中的唯一方法是使用代码在之后使用jQuery为其分配ID ，然后希望CSS应用，否则手动添加宽度属性与代码。这些看起来不够好看。

最好的方法是什么？

2013-03-12 Aerovistae

什么是替代你的选择器？ – Blender 2013-03-12 20:22:22

找到答案 - 使用'！important'标签。 – Aerovistae 2013-03-12 20:24:16

@Aeroovistae不要使用'！important'。它似乎首先是有用的，但后来你发现它毒害了你的样式表和你的生活。 – kapa 2013-03-12 20:25:04

它被jQuery UI的CSS覆盖，因为它有更多的specificity。如果你看看他们的代码，你只需要更多，并会覆盖它。

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

使用!important也将处理这个问题，但它通常说是你不想使用，除非有确实没有办法得到它周围的东西。一个例子就是如果你在一个元素上有内联样式，并且你想要在你的样式表中胜出这些样式。内联样式给出点，这是不可能的。

2013-03-12 20:22:43

准确地说它是'.ui-slider .ui-slider-handle' – 2013-03-12 20:24:20

啊，我彻底理解了。谢谢 – Aerovistae 2013-03-12 20:25:17

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

正如你已经发现，级联使得默认的CSS优先于（可能是惊人的）的方式，所以你必须使用黑客 - 像!important，或选择器中的多余标签，如htmlbody - 以确保您的样式“击败”JQuery's。
更有问题的是，许多小部件Menu作为主要罪犯（但还有其他人）在初始化时动态创建新的选择器。要覆盖这些样式，在编写JS代码后，必须在页面上使用Firebug或类似工具来计算新的选择器名称，并将它们添加到样式表中。

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

2013-03-13 19:35:54 dodgethesteamroller

回答