覆盖jquery mobile中的CSS

Question

我的具体问题是，我正试图在JQuery手机中实现这一点：

http://www.rwe-uk.com/blog/comments/ichat_like_speech_bubbles_with_css_3

发生的情况是，我可以看到页面在大约半秒内看起来很完美，然后JQuery手机就把它变成灰色。

我想更普遍的问题是，怎样才能让JQuery移动版保留一部分页面呢？

我已经在谷歌上搜索了很多，我看到了使用Themeroller的建议，但我不知道如何使用它来设置这些特定的样式。

我也尝试过使用data-role="none“，但这似乎只适用于表单元素。

编辑：

代码如下：

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    <link rel="stylesheet" href="http://www.rwe-uk.com/static/ichat_with_css3/style_5.css" />
  </head>
  <body>
    <div data-role="page">
      <div class="commentArea">
        <div class="bubbledLeft">
          Hi
        </div>
        <div class="bubbledRight">
          Hi there yourself
        </div>
      </div>
    </div>
  </body>
</html>

如果我删除jQuery移动脚本行，它可以正常工作。

Answer 1

您可以修改页面的样式：

<div data-role="page" style ="background: transparent;">

或添加自定义类：

.ui-content-transparent{
    background: transparent !important;
}

--

<div data-role="page" class="ui-content-transparent">

请参阅

Answer 2

我实现这一点的方法是按照以下顺序加载CSS：

来自themeroller

• The jquery.mobile.structure-1.0.min.css

• My通用覆盖样式的

1. 主题文件
2. My platform特定的覆盖样式，例如android.css或ios.css

对于样式表，加载的顺序很重要。

当我重写样式表3或4中的样式时，我经常需要使用！重要。

记住，要确保您的覆盖样式针对的是最终的DOM布局。

我希望这能帮到你。