覆盖Jquery Mobile样式

时间:2013-07-31 05:55:17

标签: jquery css mobile user-interface

我正在处理小型移动设备,所以我已经导入了jquery,现在正在尝试更改css。我改变的任何东西都不会改变风格。 js文件从web加载,而我将新样式内联。我正在使用!important声明,但仍然没有改变。是因为它在浏览器中加载时它会覆盖我的本地CSS吗?页眉和页脚的背景是黑色的并且使用“data-role = header”但是chaging样式正在改变dreamweaver,但是当我加载它时它不在那里它就像它加载在线文件时它取代我的代码。无论如何要覆盖它来显示我的内联css?任何帮助都会很棒。

2 个答案:

答案 0 :(得分:0)

请确保您尝试更改要查找的dom元素的样式。

实施例

您的来源:

<a data-role="button" id="lg-login-btn" class="lw-button">Walk In</a>

生成了什么源代码:

<a data-role="button"id="lg-login-btn" class="lw-button ui-btn ui-shadow ui-btn-corner-  all ui-btn-up-a" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a">
     <span class="ui-btn-inner ui-btn-corner-all">
          <span class="ui-btn-text">Walk In</span>
     </span>
</a>

Firebug和其他开发工具将帮助您检查元素及其样式 如果您使用!important 注释覆盖jquery-mobile样式,它应该可以正常工作。

您还可以访问此 link ,了解如何使用JQM主题框架自定义样式。

答案 1 :(得分:0)

我们可以通过遵循级联顺序来覆盖JQM样式,同时在页面中包含css文件。最初应该包含Jquery mobile,之后你必须保留你的样式表。

使用Chrome中的Firebug或开发人员工具栏检查是否应用了已修改的样式。

请参阅以下链接,了解如何覆盖jquery mobile中的自定义主题: http://jquerymobile.com/demos/1.0rc2/docs/api/themes.html