覆盖 Jquery Mobile CSS

Posted 2023-05-08

技术标签:

【中文标题】覆盖 Jquery Mobile CSS【英文标题】：Override Jquery Mobile CSS 【发布时间】：2011-12-15 20:03:13 【问题描述】：

是否可以使用单独的自定义 css 文件覆盖已设置样式的 JQuery Mobile 元素（按钮、列表等）？

如果是这样，我将如何引用这些元素。

谢谢

【问题讨论】：

对人们了解非常有用。我可以看到这是自定义 UI 的绝佳工具。 ThemeRoller 已移至：- themeroller.jquerymobile.com 【参考方案1】：

是的，您可以覆盖已经在 jQuery mobile 中定义的所有 css 样式，但请看看如何以一种好的方式来实现。 jQuery 文档中的Theming overview 包含与您的问题相关的信息。特别是：

覆盖主题

主题旨在作为一个坚实的起点，但旨在自定义添加自定义设计元素，使您的网站或应用程序独特。由于一切都由 CSS 控制，因此很容易使用用于识别您想要的样式属性的网络检查器工具调整。主题类（全局）和语义结构的集合添加到元素的类（特定于小部件）提供了一组丰富的目标样式覆盖的可能选择器。我们推荐将外部样式表添加到头部，放置在结构之后和主题样式表引用，其中包含您的所有样式覆盖。这使您可以轻松更新到较新版本的库，因为覆盖与库代码分开。

【讨论】：

【参考方案2】：

我不知道有什么正式的、优雅的方式来做，但是我在非最小 css 文件中查找类，然后将这样的内容添加到包含之后的 .css 文件中jquery 移动版：

.ui-header .ui-title margin-right:20px;margin-left:20px;

.ui-footer .ui-title margin-right:20px;margin-left:20px;white-space:normal;

还有，firebug 和 dev。工具 (chrome) 是您的朋友 - 检查元素及其样式。

利比

【讨论】：

【参考方案3】：

对于在 JQM 中使用自己的样式存在巨大的误解，我在任何地方都发现了这种误解，包括 SO。在 JQM 中使用自己的 CSS 的诀窍在于如何编写自己的 CSS。通常，您必须首先指定您希望使用 id 覆盖 JQM CSS 的元素，然后将 JQM 类附加到该 ID。例如，要从图像链接中删除 JQM 标准链接边框 CSS，其中 #img_button_1 是赋予图像锚父级的 ID，您可以像这样编写 CSS...

html...

<a id="img_button_1" data-role="button" data-theme="none" data-corners="false" data-shadow="false" data-inline="true"
   href="http://www.google.com" target="_blank">
    <img src="http://www.google.com/images/srpr/logo1w.png"  />
</a>

您的覆盖 CSS...