简单的“HTML5”方式是:
<iframe srcdoc="<p>Hello world!</p>"></iframe>
这里有更多信息:http://www.w3schools.com/html5/att_iframe_srcdoc.asp
但这在任何现代浏览器中都不支持。关于使这项工作的替代方法的任何建议?
[编辑] 很抱歉不够清晰。我的目标是在页面的框架(或其他元素)中使用自己的 css 打开第 3 方网站。我有自己的 css 来管理我的内容,但我希望第 3 方网站也可以使用自己的 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 机制仍然适用(继承、级联等),因此您可能必须相应地覆盖规则。除非您提供特定场景的详细信息,否则这是我能提供的最多的详细信息。
关于css - 如何为页面的一部分隔离 css?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10696062/