html - 将样式表链接到 1 个 Div 并且只有 1 个 Div

Question

我正在为一个网站构建一个 html 编辑器。我需要预览用户刚刚键入的 HTML 在目标站点中的外观，因此我需要加载该站点的样式表，但我只希望这些样式表影响 Div 中的内容。

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

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

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

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

有没有办法隔离样式表以影响我的 div 中的内容？

score 1 · Accepted Answer

通过将“样式”属性指向文件位置来加载样式表是不可能的。有关详细信息，请参阅W3C 文档。

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

score 1 · Accepted Answer

不幸的是，这是不可能的。一个可能足够的解决方法是在所有样式前面加上一个选择器，例如

#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>

2 回答 2