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

Question

我在我的应用程序中使用 jquery-ui 对话框。现在我想自定义登录/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但一切都失败了。 Atlas 我不得不问这个。

我希望所有对话框在自定义后保持不变，除了登录/注册对话框。

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 有点棘手。相反，您可能更喜欢应用一个类，然后在 CSS 中使用“!important”设置那个类的样式。像这样的东西:

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

连同 css 规则:

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