为每个id创建一个唯一的jquery对话框样式

Question

我的代码：

<style>
#demo .ui-dialog-titlebar, #demo .ui-dialog-content {
    font-size: 12px
}
</style>

<script>
$(function() {
    $('#demo').dialog();
});
</script>

<div id="demo" title="sample dialog">blah blah blah</div>

我的问题是......为什么不用该代码调整字体大小？如果我做.ui-dialog-titlebar, .ui-dialog-content它就可以了。我不喜欢的是，将样式应用于所有jquery对话框窗口，因此#demo .ui-dialog-titlebar, #demo .ui-dialog-content。

JS小提琴#demo .ui-dialog-titlebar, #demo .ui-dialog-content：

http://jsfiddle.net/gucu9u75/

只有.ui-dialog-titlebar, .ui-dialog-content的一个JS小提琴：

http://jsfiddle.net/gucu9u75/1/

Answer 1

您的案例中的问题是对话框正在修改您的HTML（检入浏览器控制台），因此您使用的选择器无法正常工作，请尝试此样式

.ui-dialog-titlebar, #demo.ui-dialog-content {
    font-size: 12px
}

see here.

Answer 2

要更改标题文字的大小，您需要执行此操作

<style>
#demo.ui-dialog-content {
  font-size: 12px;
}
span.ui-dialog-title {
  font-size: 12px;
}
</style>

Answer 3

当您启动jQuery对话框时，它会将给定的DOM元素（#demo）放在新的父元素中。为了更好地了解它如何重构DOM元素，您可以检查生成的html（参见下面的屏幕截图）。

CSS的第一部分#demo.ui-dialog-titlebar未定位标题区域。你会看到title元素现在是#demo的兄弟。

当内容实际上是#demo .ui-dialog-content元素时，第二部分.ui-dialog-content假定#demo是#demo的孩子。

一个解决方案 能够定位CSS中的单个对话框 ，就在我的脑海中，将自己将对话框包装在父元素中：

<style>
#demo-wrapper .ui-dialog-titlebar, #demo-wrapper .ui-dialog-content {
    font-size: 12px
}
</style>

<script>
$(function() {
    $('#demo').dialog();
});
</script>


<div id="demo-wrapper">
    <div id="demo" title="sample dialog">blah blah blah</div>
</div>