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

Question

简单的“HTML5”方式将是：

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

以下是有关该问题的更多信息：http://www.w3schools.com/html5/att_iframe_srcdoc.asp

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

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

Answer 1

如果我理解正确，＆＃34;隔离＆＃34;将限制样式子集仅适用于给定页面上的某些内容。

我通常会避免使用iframe（或更确切地说是更符合<object>），除非这是整合第三方内容的唯一方法，即使它实际上会限制第三方内容的适用范围任何应用的CSS。

父选择器可能适合您尝试完成的任务，有效地作为＆＃34;伪命名空间＆＃34;为您的规则：

<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;}

只会将红色应用于第二个＆＃34; Hello world＆＃34;段落。

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