Question

我正在从外部php文件加载内容并将其插入到使用查询的$ .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）也许尝试添加一个具有ID的<div>包装器，然后将ID添加到CSS中的所有定义中？

EX：

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

CSS（之前）：

.someClass {
  .. attributes ..
}

CSS（之后）：

#emailWrapper .someClass {
  .. attributes ..
}

Answer 2

目前，在不使用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。

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

2 个答案: