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

【问题标题】：Cannot style Jquery element using CSS无法使用 CSS 设置 Jquery 元素的样式
【发布时间】：2015-04-17 08:25:05
【问题描述】：

我有一个名为#Main 的Jquery 选择菜单，它隐式地获取了一个#Main 按钮。当我尝试使用 css as 设置#Main-button 的宽度时

#Main-button {
 width:200px;
}

没有效果。当我明确设置

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

它具有预期的效果，在 Firebug 下，我看到它在#Main 按钮上附加了一个 style="width:200"，这是我首先尝试使用 CSS 的。

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

我还注意到转换为 Jquery 元素的 html 元素不能使用针对特定元素的 CSS 进行样式设置，即使使用唯一 id 也是如此，但需要使用 .ui-menu 等 Jquery 类为什么他们的行为不同？涉及 Jquery 时是否有任何特定的样式指南？

【问题讨论】：

【解决方案1】：

在你的 CSS 中

#Main-button {
   width:200px;
}

但是 JS 正在添加基于内容的动态内联样式。所以它有style 属性。

所以就 CSS 的特异性而言，他们的 CSS 胜过你。

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：