自定义 CSS 不会在 jquery 移动页面上呈现答案

【问题标题】：custom css don't render on jquery mobile page自定义 CSS 不会在 jquery 移动页面上呈现
【发布时间】：2013-03-27 19:14:22
【问题描述】：

有人可以启发我为什么我的 css 不显示。我在一个文件中有一个自定义 css，只有这一行：

my_own_stylesheet：

 .test {
    color: #f00;  /* Red */
}

还有一个像这样的简单页面：

<!DOCTYPE html>
  <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>
    </title>
    <link rel="stylesheet" href="css/jquery.mobile-1.3.0.min.css" />
    <link rel="stylesheet" href="css/my_own_stylesheet.css" />
    <script src="js/jquery-1.9.1.min.js">
    </script>
    <script src="js/jquery.mobile-1.3.0.min.js">
    </script>
    <script type="text/javascript" src="cordova-2.5.0.js">
    </script>
   </head>
   <body>
    <!-- Home -->
    <div data-role="page" id="sedelPage">
        <div data-diveme="a" data-role="header">
            <h3>
                Sedel
            </h3>
        </div>
        <div data-role="content">
          <h2 class="test">Test</h2>       <!-- this is supposed to be red -->

        </div> <!--content-->
    </div><!--page-->

  </body>
</html>

我想不通。难道不能在 jquery-mobile 中为自己的元素设置样式吗？

【问题讨论】：

标签： jquery html css jquery-mobile

【解决方案1】：

你需要像这样使用它：

.test {
    color: #f00 !important;  /* Red */
}

由于标题标签已经设置了 color 样式，您需要用 !important 覆盖它。

还有另一种可能。假设这是您的第二页。当 jQuery Moible 在第一个页面（使用 ajax）之后加载页面时，它只会加载其 BODY 内容，这意味着在 HEAD 中初始化的任何 js 或 css 文件（如果在第一次加载的 HTML 中未初始化）将被忽略。所以你所有的自定义 CSS 将永远不会被应用。

工作示例：http://jsfiddle.net/Gajotres/yKE8W/

使用您自己的代码制作的示例：

<!DOCTYPE html>
  <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>
    </title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <style>
        .test {
            color: #f00 !important;  /* Red */
        }
    </style>
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js">
    </script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
   </head>
   <body>
    <!-- Home -->
    <div data-role="page" id="sedelPage">
        <div data-diveme="a" data-role="header">
            <h3>
                Sedel
            </h3>
        </div>
        <div data-role="content">
          <h2 class="test">Test</h2>       <!-- this is supposed to be red -->

        </div> <!--content-->
    </div><!--page-->

  </body>
</html>

如果您想了解更多信息，请查看我的其他答案：Why I have to put all the script to index.html in jquery mobile

【讨论】：

我试过了，但它不起作用。该页面仍将 h2 标记呈现为黑色。还是谢谢..
不可能。如果它适用于我的示例，它也应该适用于您的示例。告诉我一件事。您的页面，是第一个加载的页面吗？因为如果不是这样，那可能就是问题所在。
不是，这是怎么回事？我只有这个页面的自定义 CSS
假设这是您的第二页。当 jQuery Moible 在第一个页面之后（使用 ajax）加载页面时，它只会加载其 BODY 内容，这意味着在 HEAD 中初始化的任何 js 或 css 文件（如果在第一次加载的 HTML 中未初始化）将被忽略。跨度>
你完全正确。如果您可以编辑您的评论，那么其他人遇到同样的问题会很棒。我的意思是，他们认为解决方案不是因为添加了“！重要”。我花了很多时间在这上面，我不希望其他人以同样的方式度过它;-)