3

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で独自の要素をスタイルすることはできませんか?

4

1 に答える 1

4

次のように使用する必要があります。

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

見出しタグには既に色スタイルが設定されているため、 !importantでオーバーライドする必要があります。

別の可能性も考えられます。これが 2 番目のページだとしましょう。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>

もっと知りたい場合は、私の他の答えを見てください: jquery モバイルですべてのスクリプトを index.html に配置する必要がある理由

于 2013-04-05T11:30:34.550 に答える