如何使用特定ID设置jQueryUI对话框标题的样式？

我想更改jQueryUI对话框标题中标题栏的样式，例如，我想要绿色背景，它应该只应用于ID指定的一个对话框。这就是为什么我写了这样的内容：

#sendInviteRequestDialog.ui dialog.ui小部件头{
背景色：绿色！重要；
}

但不幸的是，它没有起作用。我试过这样的方法：

#sendInviteRequestDialog>.ui dialog>.ui小部件头{
背景色：绿色！重要；
}

但这也没有解决我的问题。我做错了什么？ 提前谢谢。

对话框标记（覆盖阴影、边框、背景、标题栏、关闭按钮、拖动手柄等）添加到调用

.dialog（）的div之外。因此，
#sendInviteRequestDialog.ui dialog.ui小部件头
将无法按预期工作

要为特定对话框设置样式，请使用以下选项：

指定的类名将添加到对话框中，例如
附加主题

示例代码：

$（“#sendInviteRequestDialog”）.dialog({
莫代尔：是的，
dialogClass:“自定义对话框-1”
});

生成的标记：


标题
内容

CSS示例：

.custom-dialog-1.ui小部件标题{
背景：绿色；
}


请注意，我使用了
background
快捷方式而不是
background color
；这将重置所有背景属性，包括背景图像。标题栏的默认背景色实际上是一幅图像。
对话框标记（覆盖阴影、边框、背景、标题栏、关闭按钮、拖动手柄等）添加在调用
.dialog（）的div之外。因此，
#sendInviteRequestDialog.ui dialog.ui小部件头
将无法按预期工作

要设置特定对话框的样式，请使用以下选项：

指定的类名将添加到对话框中，例如
附加主题

示例代码：

$（“#sendInviteRequestDialog”）.dialog({
莫代尔：是的，
dialogClass:“自定义对话框-1”
});

生成的标记：


标题
内容

CSS示例：

.custom-dialog-1.ui小部件标题{
背景：绿色；
}


请注意，我使用了
background
快捷方式而不是
background color
；这将重置所有背景属性，包括背景图像。标题栏的默认背景色实际上是一幅图像。
如果您想更改特定对话框的标题，可以使用类似的内容，而无需修改/覆盖jquery ui css。dialogClass选项配置对话框主体

$('#dialog-div-name')
.parent()
.find('.ui-dialog-titlebar')
.addClass('custom-dialog-header-class');

如果要更改特定对话框上的标题，可以使用类似的方法，而无需修改/覆盖jquery ui css。dialogClass选项配置对话框主体

$('#dialog-div-name')
.parent()
.find('.ui-dialog-titlebar')
.addClass('custom-dialog-header-class');

公认的答案建议使用“dialogClass”，但到今天为止，这是一个不推荐使用的属性（从jQueryUIV1.12开始）

它已被替换为“类”——

例如：

$("#sendInviteRequestDialog").dialog({
    modal: true,
    classes: {
        "ui-dialog": "custom-dialog-1"
    }
});

公认的答案建议使用“dialogClass”，但到今天为止，这是一个不推荐使用的属性（从jQueryUIV1.12开始）

它已被替换为“类”——

例如：

$("#sendInviteRequestDialog").dialog({
    modal: true,
    classes: {
        "ui-dialog": "custom-dialog-1"
    }
});