JQuery头部格式语法(CSS)

JQuery formatting syntax for header (CSS)

本文关键字:CSS 语法 头部 格式 JQuery      更新时间:2023-09-26

我正在尝试格式化自定义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;
     }
 }

没有任何成功。谁能给我提供正确的语法?谢谢。

答案是选择嵌套的元素。

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

或者,如果使用预处理器(SASS/LESS):

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