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

【问题标题】：How can I isolate css for part of a page?如何隔离页面的一部分的 css？
【发布时间】：2012-08-05 02:51:01
【问题描述】：

简单的“HTML5”方式是：

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

但这在任何现代浏览器中都不支持。有关使这项工作的替代方法的任何建议？

[编辑] 抱歉不清楚。我的目标是在页面的框架（或其他元素）中使用自己的 css 打开第 3 方网站。我有自己的 css 来管理我的内容，但我希望第 3 方网站也可以使用自己的 css 正确呈现，并且不会让 2 相互干扰。

【问题讨论】：

【解决方案1】：

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

我通常会避免使用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 机制仍然适用（继承、级联等），因此您可能必须相应地覆盖规则。除非你提供具体的场景细节，否则这是我能提供的最多细节。

【讨论】：