Question

有人可以启发我为什么我的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中设置自己的元素？

Answer 1

您需要像这样使用它：

.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

自定义css不在jquery移动页面上呈现

1 个答案: