样式对话框时我用什么作为选择器？

Question

在CSS中，我想更改对话框的标题栏颜色，但它不起作用。这是html和css中的对话框。

     <div id="picture1Dialog" title = "Title">
     <p id="picture1Text"></p>        
     </div>  

     CSS
     #picture1Dialog.ui-dialog-titlebar{
     background-color: #f00;
     }

Answer 1

  #picture1Dialog{
      background-color: #f00;
  }

右键单击您的元素并使用inspect元素工具获取有关样式规则的更多详细信息。我们还可以使用更多详细信息：

 .ui-dialog-titlebar

http://jsfiddle.net/CVEqr/

Answer 2

您的选择器希望ui-dialog-titlebar类直接添加到pictureDialog元素。但是对话框实际上是一个环绕pictureDialog DIV的DIV，标题栏是其中的另一个DIV。

创建对话框时，可以指定该对话框的类，然后在CSS中使用它：

$("#pictureDialog").dialog({
    dialogClass: 'picture-dialog',
    ...
});

然后你可以使用这个CSS：

.picture-dialog .ui-dialog-titlebar {
    background-color: #f00;
}

Answer 3

为什么不在选择器中使用ui-dialog-titlebar？

 .ui-dialog-titlebar{
     background-color: #f00;
 }