如何防止css加载查询被应用到整个页面？

Question

I am loading content from an external php file and inserting it into a using query's $.get functionality. The included file contains various css classes. For example, to style hyperlinks. When the file is loaded and the content inserted by jquery, the css styles are not only applied to the new content but also the entire page. To elaborate, I'm loading the content of an html email. Inside the email content is css to style hyperlinks within the email message. The message content is retrieved from the server using a php script and echoed. jQuery gets the content returned from the php script and puts it in the div's inner html with:

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

But the css in the email content (returned by file.php) gets applied to the entire page, replacing styles on my own hyperlinks. How can I prevent the new css from being applied to the entire page, and have it only apply to the newly loaded content within the div container without changing the rest of the page's original css?

Answer 1

2 possible solutions.

1) Try using an iframe and just populate its content with the CSS and HTML.

2) Maybe try and add a <div> wrapper that has an ID then just prepend the ID to all of the definitions in the CSS?

EX:

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

CSS (Before):

.someClass {
  .. attributes ..
}

CSS (After):

#emailWrapper .someClass {
  .. attributes ..
}