自定義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元素

回答

相關問題