如何防止查詢被加載到整個頁面加載css？

我從外部php文件加載內容並將其插入使用查詢的$ .get功能。包含的文件包含各種CSS類。例如，設置超鏈接的樣式。當文件加載和jQuery插入的內容時，CSS樣式不僅適用於新內容，還適用於整個頁面。詳細說明，我正在加載html電子郵件的內容。在電子郵件內容是css風格超鏈接在電子郵件消息。消息內容使用php腳本從服務器中檢索並回顯。 jQuery的會從PHP腳本返回的內容，並把它放在div的內部HTML：如何防止查詢被加載到整個頁面加載css？

$.get("file.php",function(data){ $("#div").html(data); });

但在電子郵件內容的CSS（由file.php返回）被應用到整個頁面，更換款式上我自己的超鏈接。我怎樣才能防止新的css被應用到整個頁面，並且只適用於div容器中新加載的內容而不改變頁面的原始css的其餘部分？

來源

2013-12-12 Peter Cullen

你可以改變div＃＃div嗎？ –

不知道我明白了，樣式標籤只能存在於頭部部分中，您是否在您的頁面中加載了另一個頭部部分，或者這些全局樣式究竟應用了多少？ – adeneo

可以解析響應並只將正文內容加載到您的頁面中，並使用您的CSS來設置其內容的樣式 – charlietfl

2個可能的解決方案。

1）嘗試使用iframe，並使用CSS和HTML填充其內容。

2）也許嘗試添加一個帶有ID的包裝，然後將ID預先添加到CSS中的所有定義中？

EX：

<div id="emailWrapper"> 
... Email Content/CSS ... 
</div>

CSS（前）：

.someClass { 
    .. attributes .. 
}

CSS（後）：

#emailWrapper .someClass { 
    .. attributes .. 
}

來源

2013-12-12 00:20:04 werm098

我不喜歡框架，因爲我認爲他們是一個混亂的用戶界面和風格的吸引力，但我認爲這將是最簡單，更重要的是，最可靠和兼容的解決方案。有趣的事情大腦的想法，並沒有想到... –

這是目前不可能在一個跨瀏覽器兼容的方式，而不使用一個iframe。在未來，你將能夠使用範圍的樣式（but not yet）是這樣的：

<div> 
    <style scoped> 
    p { color:green; } 
    </style> 
    <p>This text is green</p> 
</div> 
<p>This text is the default color</p>

這也將是可能的（以完全不同的方式）與Shadow DOM and templates，但同樣，not yet和not yet。

來源

2013-12-12 00:27:09

如何防止查詢被加載到整個頁面加載css？

回答

相關問題