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

我的自定义CSS不适用Body元素，当我的页面加载时，大部分元素都被jQuery CSS覆盖。如果我不放置jQuery CSS，则会在页面末尾添加一个'Div'标记，其文本为'loading'。自定义CSS不适用于使用jQuery的Body元素

我的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浏览器开发工具检查，我发现我的自定义背景的风格已被重写（我看到他们为灾区通过）。

我通过计算器和其他论坛搜索这个问题，并发现以下三种解决方案：

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

我不确定这里是否缺少任何东西（可能是语法错误？）。我对前端技术非常陌生。所以请原谅我这个愚蠢的错误。我只是遵循各种教程/示例学习。这里的任何帮助表示赞赏。

问候， Rumit

来源

2013-10-07 rumit patel

你介意创建一个JSFiddle吗？这会使调试变得更容易。 –

在你的身体有一个div。你必须像这样div：

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

来源

2013-10-07 05:40:25

Mohsen，非常感谢。只要3分钟结束，我会将其标记为答案:)。不过，我对这个东西很陌生。所以只是想更好地理解答案。你能否详细说明一下，你在这里指的是什么'div'？为什么不是body [data-role =“page”]？为什么它不直接为链接工作（）而没有提供任何数据角色？这将有助于更好地理解问题，并可能有助于解决问题。 –

在Chrome浏览器中有惊人的检查元素，你可以看到我看到的内容:)，在具有'data-role =“page”'属性的主体后面有一个'div'，你必须选择一个带有这个属性的'div'， body' –

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

回答

相关问题