0

我的自定义 CSS 不应用 Body 元素，当我的页面加载时，大部分元素都被 jQuery CSS 覆盖。如果我不放 jQuery CSS，它会'Div'在页面末尾添加一个带有 text 的标签'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>

Body我的自定义 CSS 对元素有以下定义。我还有其他样式的a元素，这些样式应用于链接。截至目前，它只是我的Body元素样式不起作用。

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

当我检查 Chrome 开发工具时，我注意到我的自定义背景样式已被覆盖（我认为它们已被删除）。

我通过 StackOverFlow 和其他论坛搜索了这个问题，发现了以下三个解决方案：

  • 添加data-role="none"到元素。我也试过这个，但是，这不起作用。至少看起来是 Body 元素。
  • Head在元素中的 jQuery CSS 之后列出自定义 CSS 。我已经在这样做了。目前不工作。
  • 添加!important到 Body 的样式属性（在我的示例中，我仅显示一个）。我试图将它添加到所有三个属性上，但没有一个起作用。

我不确定我是否在这里遗漏了什么（可能是语法错误？）。我对前端技术很陌生。所以请原谅我在这里犯的任何愚蠢的错误。我只是按照各种教程/示例来学习。任何帮助在这里表示赞赏。

问候， 鲁米特

4

1 回答 1

1

在你的身体上有一个div。你必须div这样设计：

div[data-role="page"] {
    font-family: sans-serif;
    background: #333 !important;
    color: #eee;
}
于 2013-10-07T05:40:25.177 回答