我懂你这种头疼的情况——明明能通过给对话框div加类搞定内容区样式，可标题栏的独立样式就是死活不生效，太憋屈了😅

问题出在哪？ #

你之前写的CSS选择器.ui-widget-header.error-dialog逻辑不对：jQuery UI的对话框结构里，.ui-widget-header（标题栏）是外层.ui-dialog（你加了error-dialog类的那个div）的子元素，不是同一个元素。你的选择器是在找同时拥有ui-widget-header和error-dialog类的元素，自然匹配不到任何内容。

三种可行的解决方案 #

1. 利用父类选择子元素（最简单直接）

直接通过父元素的类定位标题栏，调整CSS选择器的层级：

/* 错误对话框标题栏 */
.error-dialog .ui-widget-header {
  background: red;
  color: white; /* 可选：搭配文字颜色更醒目 */
}

/* 成功对话框标题栏 */
.success-dialog .ui-widget-header {
  background: green;
  color: white;
}

这种方法不需要修改JS，只要保持你原来给对话框div加error-dialog/success-dialog类的操作就行，CSS会自动找到对应父元素下的标题栏。

2. 初始化时给标题栏动态加类（灵活度高）

如果需要更精细的控制，比如在对话框创建时动态给标题栏绑定类，可以用create事件：

// 初始化错误对话框
$("#error-dialog").dialog({
  autoOpen: false,
  create: function(event, ui) {
    // 找到当前对话框的标题栏，添加自定义类
    $(this).closest(".ui-dialog").find(".ui-widget-header").addClass("error-header");
  }
});

// 初始化成功对话框
$("#success-dialog").dialog({
  autoOpen: false,
  create: function(event, ui) {
    $(this).closest(".ui-dialog").find(".ui-widget-header").addClass("success-header");
  }
});

然后对应的CSS就可以直接用自定义类：

.error-header {
  background: red !important; /* 必要时用!important覆盖默认样式，看实际情况 */
}
.success-header {
  background: green !important;
}

3. 使用jQuery UI官方的classes配置（推荐1.12+版本）

如果你用的是jQuery UI 1.12及以上版本，官方提供了classes选项，可以直接给对话框的各个部件指定自定义类，最规范：

$("#error-dialog").dialog({
  autoOpen: false,
  classes: {
    "ui-dialog-titlebar": "error-titlebar" // 给标题栏绑定自定义类
  }
});

$("#success-dialog").dialog({
  autoOpen: false,
  classes: {
    "ui-dialog-titlebar": "success-titlebar"
  }
});

CSS写法同样简洁：

.error-titlebar {
  background: red;
}
.success-titlebar {
  background: green;
}

小提示 #

如果遇到样式被默认UI覆盖的情况，可以用浏览器开发者工具（F12）检查标题栏元素，查看默认样式的优先级，必要时用更具体的选择器或者!important来覆盖。

内容的提问来源于stack exchange，提问作者MKF