样式对话框按钮CSS仅用于页面上的几个jQuery对话框

Question

我正在尝试定位jQuery对话框上的按钮，但仅针对页面上的几个对话框。

我通常会在使用之前锁定按钮：

.ui-dialog .ui-dialog-buttonpane

和

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset

在这种情况下，我只想为这一个对话框设置按钮的样式（我想将它们居中）。

该对话框是从隐藏的div创建的：

<div id="one" style="display:none;">
  Content of the dialog
</div>

<script type="text/javascript">
$(document).ready(function(){
  $("#one").dialog({
    buttons: {"save":function(){alert("saved");}}
  });
});
</script>

如何使用CSS定位这个单一对话框？

谢谢！

Answer 1

只使用CSS，您应该能够使用兄弟选择器，因为jQuery UI将#one元素合并到对话框的主体中：

#one ~ .ui-dialog-buttonpane .ui-dialog-buttonset {
  margin: auto;
  /* whatever other styling you need here */
}