jQuery UI 对话框边框在 1.12.1 中不再工作

Question

到目前为止，我使用了 jQuery UI 1.11.4，在我的 Web 应用程序中，我显示了一些用于多个操作、信息等的对话框小部件。我使用以下 CSS 样式强制它们具有细蓝色边框，效果很好:

.ui-dialog {
  border: 2px solid #0000FF;
  padding: 0px;
}

今天，我切换到 jQuery UI 1.12.1，边框不再显示...我分析了 1.11.4 和 1.12.1 对话框之间的差异，我看到的唯一主要差异是旧版本有一个额外的

display: block;

以其风格，所以我尝试将其添加到我自己的风格中。没有效果...边框消失了。

当然，在提问之前我首先对我的问题进行了研究 - 但没有成功......描述的解决方案 here也没用。

有人对这个问题有想法吗？

Answer 1

看看他们的示例页面，只要您的 css 在 jquery-ui.css 之后加载，就应该这样做:

.ui-widget.ui-widget-content {
  border: 2px solid #0000FF;
  padding: 0;
}

如果您的自定义样式表在 jquery-ui.css 之前加载(这将是错误的 - 它应该是页面中加载的最后一个样式表，因此您可以使用相同的选择器轻松覆盖现有 CSS特异性)，您需要一个稍强的选择器:div.ui-widget.ui-widget-content。

这仅适用于您尚未自定义 jquery-ui 小部件的默认标记，并且您没有其他具有更强选择器的代码片段影响我们尝试设置样式的元素的情况。