html – 如何将css隔离为页面的一部分？

简单的“ HTML5”方式是：

<iframe srcdoc="<p>Hello World!</p>"></iframe>

这里有更多信息：http://www.w3schools.com/html5/att_iframe_srcdoc.asp

但任何现代浏览器都不支持此功能.有关替代方法的任何建议吗？

[编辑]抱歉缺乏清晰度.我的目标是在页面的框架(或其他元素)中使用自己的css打开第三方网站.我有自己的css管理我的内容,但我想让第三方网站也使用自己的CSS正确呈现,而不是让彼此干扰2.

解决方法

如果我理解正确,“隔离”将指限制样式子集仅适用于给定页面上的某些内容.

我通常会避免使用iframe(或更确切地说是更合规的< object>),除非这是集成第三方内容的唯一方法,即使它实际上会限制任何应用的css的适用范围.

父选择器可能适合您要完成的任务,有效地充当您的规则的“伪命名空间”：

<p>Hello World!</p>
<p>Some great content here!</p>
<div id="isolated-content"><p>Hello world styled differently!</p></div>

和

p {color:black;}
#isolated-content p {color:red;}

只会将红色应用于第二个“Hello world”段落.

当然,所有正常的css机制仍然适用(继承,级联等),因此您可能必须相应地覆盖规则.除非您提供特定的方案详细信息,否则这是我可以提供的最详细信息.