javascript - 如何防止加载查询的 css 应用于整个页面？

Question

我正在从外部 php 文件加载内容并将其插入到 using 查询的 $.get 功能中。包含的文件包含各种 css 类。例如，设置超链接的样式。当文件被加载并由 jquery 插入内容时，css 样式不仅应用于新内容，而且应用于整个页面。为了详细说明，我正在加载 html 电子邮件的内容。电子邮件内容内部是用于设置电子邮件中超链接样式的 CSS。使用 php 脚本从服务器检索消息内容并回显。 jQuery 获取从 php 脚本返回的内容并将其放入 div 的内部 html 中:

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

但是电子邮件内容中的 css(由 file.php 返回)被应用到整个页面，替换了我自己的超链接上的样式。如何防止新的 css 应用于整个页面，并使其仅应用于 div 容器中新加载的内容而不更改页面的其余原始 css？

Answer 1

2 种可能的解决方案。

1) 尝试使用 iframe 并仅使用 CSS 和 HTML 填充其内容。

2) 也许尝试添加一个 <div>具有 ID 的包装器然后将 ID 添加到 CSS 中的所有定义之前？

例如:

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

CSS(之前):

.someClass {
  .. attributes ..
}

CSS(之后):

#emailWrapper .someClass {
  .. attributes ..
}