覆盖Jquery Mobile CSS

Question

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

如果是这样,我将如何引用元素.

谢谢

Answer 1

是的,你可以覆盖jQuery mobile中已经定义的所有css样式,但是看看如何以一种好的方式做到这一点.jQuery文档中的主题概述提供了与您的问题相关的信息.特别是:

覆盖主题

这些主题是一个坚实的起点,但是可以自定义以添加使您的网站或应用独特的自定义设计元素.由于所有内容都由CSS控制,因此很容易使用Web检查器工具来识别要修改的样式属性.添加到元素的主题类(全局)和语义结构类(特定于小部件)的集合提供了一组丰富的可能选择器来针对目标样式覆盖.我们建议在结构和主题样式表引用之后添加一个外部样式表,其中包含所有样式覆盖.这允许您轻松更新到库的较新版本,因为覆盖与库代码分开.

Answer 2

我不知道这是一种官方的,优雅的方式,但是我查看了非min css文件来查找类,然后将这样的内容添加到jquery mobile 之后的.css文件中:

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

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

萤火虫和开发者.工具(chrome)是你的朋友 - 检查元素及其样式.

利比

Answer 3

关于在JFSM中使用我自己的风格,包括SO,我发现了一个巨大的误解.使用自己的CSS和JQM的技巧在于如何编写自己的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" alt="Google" />
</a>

你的覆盖CSS ...

#img_button_1 .ui-btn-inner { border: 0 }

我之前用一些可以在这里找到的工作实例回答了这个问题

Jquery Mobile - 使用图像作为链接 - 图像下方的蓝线

您可以使用相同的技术来解决所有JQM CSS冲突.现在,您可以重新考虑使用JQM来实现您期望的结果,了解通过在您自己的CSS中使用CSS specicivity解决这些冲突是多么简单.希望这可以帮助!