0

カスタム CSS は Body 要素を適用せず、ページが読み込まれると、ほとんどの要素が jQuery CSS によってオーバーライドされます。jQuery CSS を配置しない'Div'と、ページの最後にテキストでタグが追加されます'loading'。

私のHTML：

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" href="custom.css" />
<title>Title</title>
</head>
<body>
<p id="rssFeedLoad">Loadin...</p>
<p id="rssFeed"> </p>
<script>
//debugger;
var yQuery = 'http://news.google.com/news?geo=SOMEZIP&output=rss';
var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent("select * from xml where url='" + yQuery + "'") + '&format=json&callback=?';
//debugger;
(function(){
    //debugger;
    $.getJSON(yql)
         .done(function(data){
        //debugger;
        var rssFeed = document.getElementById("rssFeed");
        $.each(data.query.results.rss.channel.item, function(i,item){
            var rssLink = document.createElement("a");
            rssLink.id = 'news' + i;
            rssLink.href = item.link;
            rssLink.innerText = item.title;
            rssFeed.appendChild(rssLink);
            var br = document.createElement("br");
            rssFeed.appendChild(br);
        });
        linkify( 'a' );
     });
})();
//debugger;
var supports3DTransforms =  document.body.style['webkitPerspective'] !== undefined || 
                            document.body.style['MozPerspective'] !== undefined;
//debugger;
function linkify( selector ) {
    if( supports3DTransforms ) {

        var nodes = document.querySelectorAll( selector );

        for( var i = 0, len = nodes.length; i < len; i++ ) {
            var node = nodes[i];

            if( !node.className || !node.className.match( /roll/g ) ) {
                node.className += ' roll';
                node.innerHTML = '<span data-title="'+ node.text +'">' + node.innerHTML + '</span>';
            }
        };
    }
}
</script>
</body>
</html>

私のカスタム CSS には、Body要素の次の定義があります。要素には他のスタイルもありa、それらはリンクに適用されます。今のところ、機能しない私のBody要素スタイルだけです。

body {
    font-family: sans-serif;
    background: #333 !important;
    color: #eee;
}

Chrome 開発ツールで確認すると、カスタムの背景スタイルが上書きされていることに気付きました (それらは打ち抜かれているように見えます)。

この問題について StackOverFlow や他のフォーラムを検索したところ、次の 3 つの解決策が見つかりました。

  • data-role="none"要素に追加します。私もこれを試しましたが、これはうまくいきません。少なくとも Body 要素ではそう思われます。
  • 要素内の jQuery CSS の後にカスタム CSS をリストしHeadます。私はすでにそれをやっています。現在動作していません。
  • Body のスタイル プロパティに追加!importantします (私の例では、1 つのみを示しています)。3 つのプロパティすべてに追加しようとしましたが、どれも機能しませんでした。

ここに何かが欠けているかどうかはわかりません (構文エラーの可能性がありますか?)。私はフロントエンド技術にかなり慣れていません。ここで私のばかげた間違いを許してください。さまざまなチュートリアル/例に従って学習しています。ここで何か助けていただければ幸いです。

よろしく、ルミット

4

1 に答える 1