Question

我正在为网站构建一个html编辑器。我需要预览用户输入的HTML在目标网站中的显示方式，因此我需要加载那些网站样式表，但我只希望这些样式表能够影响Div中的内容。

我没有权限编辑样式表以使其特定于该div。

所以我的代码需要按如下方式工作：

<div style="/styles/public1.css">
New HTML
</div>

我可以在div之外加载样式表，但这会覆盖我自己的网站样式表，所以不好。

是否有办法隔离样式表以仅影响div中的内容？

Answer 1

通过将'style'属性指向文件位置，无法加载样式表。有关详细信息，请参阅W3C documentation。

您可能希望将“iframe”用于您的目的。只需指向＆lt; iframe＆gt;到您正在编辑的HTML文档。允许应用任何样式表，就像常规网页一样。

Answer 2

遗憾的是，这是不可能的。解决这个问题可能就是为你的所有样式添加一个选择器前缀，例如

#destination body { /* */ }
#destination li { /* */ }
/* etc. */

CSS3中还有一个漂亮的功能，但是被称为“范围”CSS的浏览器并没有广泛支持。这是在仅对父元素及其子元素的元素中定义的CSS。

<div>
    <style scoped>
        p { font-weight: bold; }
    </style>
    <p>Bold text</p> 
</div>
<p>Normal text</p>

或者，您可以使用<iframe>元素在网页中加载网页。

<iframe src="http://www.google.com"></iframe>

Answer 3

为什么不尝试使用javascript？

Here is an example，有人请求尝试此操作。