Question

我的自定义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>

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

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

当我查看Chrome开发工具时，我注意到我的自定义背景样式已被覆盖（我看到它们已经过时）。

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

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

我不确定我是否遗漏了任何内容（可能是语法错误？）。我是前端技术人员的新手。所以请原谅我这里任何愚蠢的错误。我只是按照各种教程/示例来学习。感谢您的任何帮助。

此致 Rumit

Answer 1

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

div[data-role="page"] {
    font-family: sans-serif;
    background: #333 !important;
    color: #eee;
}

自定义CSS不适用于使用jQuery的Body元素

1 个答案: