1

我有这种情况。我在我的应用程序中使用 bootstrap 和 jquery-ui，以这种方式包含：

<link href="bootstrap.min.css" rel="stylesheet" media="screen"/>
<link href="jquery-ui.css" rel="stylesheet" media="screen"/>
<!-- My custom stylesheet -->
<link href="style/style.css" rel="stylesheet" media="screen"/>

当使用 jquery-ui 打开一个模态窗口时，我意识到内容有它“自己的”字体系列和字体大小，因为这个规则：

.ui-widget input, 
.ui-widget select, 
.ui-widget textarea, 
.ui-widget button {
    font-family: Verdana,Arial,sans-serif/*{ffDefault}*/;
    font-size: 1em;
}

在 Chrome (F12) 中调试时，我可以“禁用”此规则并获得预期结果。但我不知道如何在我的自定义样式表中做到这一点。我知道这可以解决问题：

.ui-widget input, 
.ui-widget select, 
.ui-widget textarea, 
.ui-widget button {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
}

或者我可以注释掉 jquery-ui.css 文件中的规则。但是我一直在寻找一种方法，如果以后我决定更改“基本”字体，我可以在一个地方进行更改，并且不修改 jquery-ui 和 bootstrap css 文件如何实现这一点？Chrome 中“禁用”规则的机制是如何工作的？

4

3 回答 3

2

您只需将相同的代码放在您自己的样式表中即可。像这样

.ui-widget input, 
.ui-widget select, 
.ui-widget textarea, 
.ui-widget button {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
}

只要您的自定义 CSS 文件链接在 jQuery UI CSS 之后，它就会覆盖默认样式。

然后，您可以随时更改它。

于 2013-08-29T12:50:42.517 回答
2

Chrome 中的功能是一种调试功能，没有“现实生活”对应物。

您需要做的是确定哪些值应该优先于其他值。您可以通过更改 CSS 文件的顺序来做到这一点（在 jquery-ui 之后添加 bootstrap.min.css 会使其规则取代 jquery-ui 的），添加您自己的规则以覆盖其他所有人的规则。

作为警告，我建议不要同时使用 jquery-ui 和 bootstrap CSS——它们都希望各自框架的功能相当完整，并且会导致大量重叠。

此外，如果您想真正控制基本 CSS（而不是引入覆盖），请尝试使用引导框架的 LESS（或 SASS 端口）版本 - 然后您可以将字体选择等内容存储在变量中，然后更改它会在您使用它的任何地方更改字体！

于 2013-08-29T12:52:51.573 回答
0

最好的解决方案是坚持使用一个样式表和一个框架。在大多数情况下，jQuery UI 和 Bootstrap 不能很好地配合使用，我建议使用 Bootstrap modal。然后样式将在任何地方保持一致。

另一种方法是编辑 jQuery UI 的样式表并简单地删除这些行。如果它被缩小，请使用带有自动换行和查找/搜索功能的文本编辑器（任何体面的编辑器）。不过，我看你不想那样做。

有了这些限制，您最好的选择是要求它继承样式。

.ui-widget input, 
.ui-widget select, 
.ui-widget textarea, 
.ui-widget button {
    font-family: inherit;
    font-size: inherit;
}

通过将其置于其他样式表下方，它将覆盖元素的 jQuery UI 样式，并取而代之的是采用其最接近的父元素的样式，例如 Bootstrap 在 body 元素上设置的字体：

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
于 2013-08-29T12:50:29.413 回答