自定义特定jquery-ui对话框的样式不是所有的对话框？

Question

我在我的应用程序中使用jquery-ui对话框。现在我想自定义signin / sinup对话框，即jquery-ui对话框。没有自定义对话框看起来像：

但是当我对login.jsp页面进行了以下更改时，它的样式也正在改变我不希望发生的所有应用程序对话框，只有登录/注册对话框。 CSS代码是：

.ui-widget-header {
    background: #343434 !important;
    border: none
}

.ui-dialog-titlebar-close{
    background: #1C1C1C !important;
}

.ui-dialog {
    background: #343434 !important;
    border: thin 1px;
}

此登录对话框（id =“signinDialog”）的

和js代码为：

$(document).ready(function() {
$("#signinDialog").dialog({
    width : 600,
    resizable : false,
    modal : true,
    autoOpen : false,
    position : ['top', 157]
});



 function openLoginPopup() {
    $("#signinDialog").dialog("open");
}

在这些更改后，我按照我想要的方式获取登录/注册对话框，但问题是这是为所有应用程序更改jquery-ui对话框css，看起来像这样：

我从早上开始就遇到了这个问题并尝试了很多方法来解决，比如说 this但是一切都持平了。我不得不问这个问题。

我希望自定义后的所有对话框保持相同，除了signin / signup对话框。

Answer 1

如EasyPush建议的那样，为特定对话框的ID使用CSS选择器是行不通的，因为您的内容成为DOM中对话框元素的子。由于CSS没有父选择器（参见CSS selector for "foo that contains bar"?），因此我无法看到使用纯CSS。相反，您需要使用javascript。

使用jQuery作为关闭按钮，例如：

$("#signinDialog").parent().find(".ui-dialog-titlebar-close").css("background","#1C1C1C");

不幸的是，通过jQuery将“！important”规则应用于CSS有点棘手。您可能更喜欢应用一个类，然后使用“！important”在CSS中设置那个类。类似的东西：

$("#signinDialog").parent().find(".ui-dialog-titlebar-close").addClass("mySpecialClass");

与css规则一起：

.mySpecialClass{
background: #1C1C1C !important;
}

Answer 2

如果我没有误解你，你似乎确实在改变所有对话的布局。这是因为选择器“.ui-dialog”将匹配应用程序中的所有对话框。

如果您只想专门设置登录对话框的样式，则需要专门选择这些元素。你应该能够这样做：

#signinDialog.ui-dialog {
    background: #343434 !important;
    border: none
}

#signinDialog .ui-dialog-titlebar-close{
    background: #1C1C1C !important;
}

#signinDialog .ui-dialog {
    background: #343434 !important;
    border: thin 1px;
}