3

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

我的自己的样式表：

 .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 中为自己的元素设置样式吗？

4

1 回答 1

4

你需要像这样使用它：

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

因为标题标签已经设置了颜色样式，你需要用!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

于 2013-04-05T11:30:34.550 回答