Question

我的具体问题是我正在尝试在JQuery Mobile中实现它：

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

发生的事情是，我可以看到页面看起来完美了大约半秒钟，然后JQuery Mobile将它全部变为灰色。

我想更普遍的问题是如何让JQuery Mobile单独留下一部分页面？

我在Google上搜索了很多内容，我看到了使用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 Mobile脚本行，它可以正常工作。

Answer 1

您可以修改页面样式：

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

或添加自定义类：

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

-

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

请参阅Example

Answer 2

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

来自themeroller的主题文件
jquery.mobile.structure-1.0.min.css
我常见的压倒一切的风格
我的平台特定覆盖样式，例如android.css或ios.css

使用样式表，加载顺序很重要。

当我在样式表3或4中覆盖样式时，我经常需要使用！important。

请务必确保使用覆盖样式定位最终DOM布局。

我希望这会有所帮助。

在jquery mobile中覆盖CSS

2 个答案: