javascript - jQuery 中样式小部件的应用似乎有所不同

Question

在我的代码片段中，我演示了如何使用#divId .class 将不同的类应用到两个不同的accordion 小部件。这非常有效，但是当我尝试将样式应用于 dialog 小部件时，它的执行效果并不相同。我想不通。为什么同样的规则不适用？我是 jQuery 新手。

$(function() {
  $("#dialog").dialog();
});

$(function() {
  $("#dialog2").dialog();
});

$(function() {
  $("#accordion").accordion();
});

$(function() {
  $("#accordion2").accordion();
});

#dialog .ui-dialog-titlebar {
  background-image: none;
  background-color: red;
}
#dialog2 .ui-dialog-titlebar {
  background-image: none;
  background-color: green;
}
#accordion .ui-accordion-header {
  background-image: none;
  background-color: red;
}
#accordion2 .ui-accordion-header {
  background-image: none;
  background-color: green;
}

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="dialog" title="Dialog">
  <h3>1</h3>
  <div></div>
  <h3>2</h3>
  <div></div>
</div>

<div id="dialog2" title="Dialog 2">
  <h3>1</h3>
  <div></div>
  <h3>2</h3>
  <div></div>
</div>

<div id="accordion">
  <h3>1</h3>
  <div></div>
  <h3>2</h3>
  <div></div>
</div>

<div id="accordion2">
  <h3>1</h3>
  <div></div>
  <h3>2</h3>
  <div></div>
</div>

Answer 1

您调用 dialog() 的元素不是标题栏所在的外部包装器...标题是同级元素，因为插件使用包含以下内容的外部元素包装您的元素两者皆有。

有一个选项可以在此外部包装上设置类:

$("#dialog").dialog({dialogClass: "dialog-red"});

然后在CSS中:

.dialog-red .ui-dialog-titlebar {
  background-image: none;
  background-color: red;
}

$(function() {
  $("#dialog").dialog({
    dialogClass: "dialog-red"
  });
});

.dialog-red .ui-dialog-titlebar {
  background-image: none;
  background-color: red;
}

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="dialog" title="Dialog">
  <h3>1</h3>
  <div></div>
  <h3>2</h3>
  <div></div>
</div>