无法覆盖 .dialog() 小部件中的某些 CSS 对象主题答案

【问题标题】：Can't over-ride certain css objects theme in the .dialog() widget无法覆盖 .dialog() 小部件中的某些 CSS 对象主题
【发布时间】：2013-08-11 02:13:15
【问题描述】：

我在使用 .dialog() 框覆盖 css 主题时遇到问题。我按照http://api.jqueryui.com/dialog/#theming 此处的说明进行操作，但无法解决此问题。我将dialogClass 选项与.dialog() 小部件一起使用，因此它应该附加我应用于它们的样式，如下所示：

Javascript 初始化：

$("#modal").dialog({
   dialogClass: "css" 
});

HTML：

<div id="modal"></div>

CSS：

.css .ui-dialog-content { 
    border:1px solid #ddd; 
    background-color:#333; 
    padding:50px !important; }

好的，所以文档说我可以设置.ui-dialog-content 类和对象的样式，并且它可以工作，有点。边框和背景颜色有效，但填充不起作用，因为它在element.style 中设置了样式，即使使用!important 也不会覆盖它，所以它基本上不会让我将任何预先存在的设置更改为模态类，即使使用!important，我想知道是否有人知道如何让它工作，首先让padding 在.ui-dialog-content 类上工作。

你可以在这里看到一个小提琴：http://jsfiddle.net/Tsy52/

【问题讨论】：

填充似乎工作得很好..
不在这里，尝试删除它，看看大小是否真的改变了。
内容没有初始填充属性。因此，即使不使用 !important 也可以设置它

标签： jquery jquery-ui dialog

【解决方案1】：

我们以min-height 为例。

它的内联样式为min-height:28px

如果您想更改将CSS 添加到该类将无济于事，因为内联样式的特异性大于CSS 的特异性

顺序是这样的

!important > inline styles > class property

使用!important 是一种不好的模式，必须避免。在这种情况下，您可以直接在元素上设置CSS 属性。

$('.ui-dialog-content').css("min-height", "100px")

对话框初始化后。

【讨论】：