标头（CSS）的JQuery格式化语法

Question

我正在尝试格式化自定义jQuery UI对话框的标题栏。该对话框具有指定的类（例如.orange），如下所示：

.ui-dialog.orange {
    background: #F9F9F9;
    border: 3px solid orange;
}

我想更改标题栏如下

.ui-dialog-titlebar {
    background: purple;
}

但仅适用于班级.orange

我试过

.ui-dialog-titlebar.orange {
    background: purple;
}

和

.ui-dialog.orange {
     background: #F9F9F9;
     border: 3px solid orange;
     #titlebar {
         background: purple;
     }
 }

没有任何成功。有人能为我提供正确的语法吗？感谢。

Answer 1

答案是选择嵌套元素。

 .ui-dialog.orange .ui-dialog-titlebar {
   background: purple;
 }

或者，如果您使用预处理器（SASS / LESS）：

.ui-dialog {
   /* ... */
   &.orange {
     .ui-dialog-titlebar {
       background: purple;
     }
   }
 }