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

Question

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

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

.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 */
}