javascript - 更改 jQuery UI 按钮大小？

Question

我一直在整个页面上使用 jQuery UI 按钮，但是我还没有找到解决这个看起来很简单的问题的方法。我希望我的一些按钮比其他按钮小，这应该像将按钮文本的 CSS 设置为类似 font: .8em; 一样简单。但是 jQuery UI 获取您的 DOM 元素并将其包装起来:

<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
   <span class="ui-button-text">Button Label</span>
</button>

所以如果我有一个 <button class="small-button">Small button!</button> jQuery 会将文本放在子范围内。给 small-button 的任何字体大小类将被忽略。

必须有一个解决这个问题的方法，而不用破解 jQuery 如何制作它的按钮。有什么想法吗？

Answer 1

如果它直接使用 font-size 设置 ui-button-text 样式，您可以通过应用 !important 在更高级别覆盖它。如:

.small-button {
   font-size: .8em !important;
}

编辑:尝试直接在 .ui-button-text 上设置 CSS 样式以继承:

.ui-button-text {
   font-size: inherit !important;
} 

这也应该使 .small-button 上的 !important 变得无关紧要。