将 CSS 应用于 jquerymobile 中的 data-role="page"答案

【问题标题】：Apply CSS to data-role="page" in jquerymobile将 CSS 应用于 jquerymobile 中的 data-role="page"
【发布时间】：2012-05-01 03:57:27
【问题描述】：

我有这个页面

<head>
<title>Real Life Achievements</title>
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width">

<link rel="stylesheet" type="text/css" href="frameworks/jquerymobile.css"/> 
    <link rel="stylesheet" type="text/css" href="application.css"/>

<script type="text/javascript" charset="utf-8" src="frameworks/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="frameworks/jquerymobile.js"></script>

<script type="text/javascript" charset="utf-8">

    document.addEventListener("deviceready", initApp, false);

</script>
</head>
<body>
<div data-role="page" id="start"> 

    ...

</div>
</body>

我读到here，我可以通过这样做为整个 data-role="page" 容器应用样式

.ui-page {
   background: #eee;
}

但它不起作用。我的页面背景总是白色的。我不想使用 JQM 样式。如何将我的 body-styles 应用到 jquery 移动“页面”？

【问题讨论】：

你在哪里设置这个样式？
在“application.css”文件中，我添加了header
请don't add signatures or taglines to your posts。
据我所知，您需要将该类应用于您希望应用这些规则的元素。
@GnrlBzik JQueryMobile 将 <div data-role="page"> 替换为 <div class="ui-page">。

标签： css jquery-mobile

【解决方案1】：

.ui-content 将为 data-role=content 区域设置样式。因此，例如，如果您想为整个页面区域设置样式，您可以这样做：

.ui-content, .ui-page{background: #eee;}

请记住，您必须按照其他人的建议将 CSS 移动到 JQM 样式表下方。

这是一个工作的例子http://jsfiddle.net/codaniel/7M4Pg/1/

【讨论】：

这只是设置包含文本的区域的背景，而不是整个站点
奇怪的是，它将背景应用于 ui-content，而不是 ui-body
我将我的代码插入到侧面，它可以在那里工作，但不能在我的应用程序中。嗯嗯
您是否编辑了您的 JQM css？您是否为元素添加了样式，即<div data-role="page" style="background:#eee;">？

【解决方案2】：

您需要将 application.css 标头移到框架 css 文件下方，因为您的样式会被框架加载覆盖。或者，您可以将!important 添加到后台规则中，例如background: #eee !important;，以防止被以后的样式表覆盖。

【讨论】：

移动 application.css 然后开始添加 !important 标志会更好、更全面。
@GnrlBzik 同意，这就是为什么我将其列为替代方法，而不是主要方法 =)
我现在将在不同的手机上测试它。