无法使用CSS设置Jquery元素的样式

Question

我有一个名为#Main的Jquery selectmenu，它隐含地获得一个＃Main-button。当我尝试使用css作为

设置＃Main-button的宽度时

#Main-button {
 width:200px;
}

它没有效果。 当我明确设置

$( "#Main" ).selectmenu({ width:200})

它具有所需的效果，在Firebug下我看到它附加了一个样式=＆＃34;宽度：200＆＃34;在＃Main-button上，这是我第一次尝试使用CSS。

有什么不同？我已经检查过我的CSS样式表在Jquery之后被调用了，所以没有优先级问题

另外我注意到，转向Jquery元素的html元素无法使用针对特定元素的CSS进行样式化，即使使用唯一的id，但需要使用Jquery类，如.ui-menu等 他们为什么表现不一样？当Jquery参与时，是否有任何特定的造型gudilines？

Answer 1

在你的CSS中

#Main-button {
   width:200px;
}

但JS正在根据内容添加动态内联样式。因此它具有style属性。

因此，就CSS特异性而言，他们的CSS胜过你。

您必须在规则中使用!important以避免覆盖您的CSS。

#Main-button {
   width:200px !important;
}

Answer 2

要为selectmenu或每个jquery小部件设置样式，您需要使用jquery默认类。你的选择器必须像

＃Main-button.ui-selectmenu-menu li a

您还可以为不同的样式扩展selectmenu的 _renderItem和_renderMenu 功能。