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

Question

用.dialog()框覆盖css主题时遇到问题。我按照这里的指示http://api.jqueryui.com/dialog/#theming我无法解决这个问题。我在.dialog()小部件中使用dialogClass选项，因此它应该附加我应用于它们的样式，如下所示：

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类和对象进行样式化，它很有效，SOMEWAT。边框和背景色可以工作，但填充不起作用，因为它是在element.style中设计的，即使使用!important也不会超过它，所以它基本上不允许我更改模态类的任何预先存在的设置，即使在使用!important时，我想知道是否有人知道如何使其工作，从使padding在.ui-dialog-content类上工作开始。

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

Answer 1

让我们以min-height为例。

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

如果您想更改将CSS添加到该类将没有帮助，因为内联样式的特异性大于CSS 的特异性

订单是这样的

!important > inline styles > class property

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

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

对话框初始化后。