jquery - 样式对话框按钮 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 */
}