CSS:命名空间一段HTML

Question

我正在构建一个浏览器扩展,它将在一些页面中插入一大块HTML.我希望页面的CSS不适用于本节.做这个的最好方式是什么？是否有一个很好的重置我可以放在我的HTML的根元素并将其设置为!重要,以便它应用于其他人之后？

Answer 1

您可以使用重置CSS并将其仅应用于页面的一个子集.比如这一个.

My page
<div id="no-css">
 blah blah this has no css
</div>

当然,您必须在重置中确定所有内容的范围,例如:

ol, ul {
    list-style: none;
}

应该:

#no-css ol, #no-css ul {
    list-style: none;
}

为了简化这一点,我建议使用类似Less的CSS"框架" 来简化这类事情:

#no-css{
    /* Big copy and paste of all the reset css file */
}

使用这个较少的代码,您可以真正使用less或只生成一个新的reset.css文件并正常使用它.

当然,您也可以找到特定于元素的重置,但是此解决方案允许您选择最喜欢的重置.

另一种解决方案是将您的页面嵌入到iframe中.

Answer 2

100% 将其从级联中取出的唯一方法是将其放入 iframe 中。

您可以使用 css 重置样式表，但只需在所有内容前面加上根元素 id/class 前缀即可。这对于对抗这些影响大有帮助，但在现场，您可能需要做一些更多的最终调整。

也许最好的方法是简单地设置子规则的每个合理属性。所以我的意思是设置背景、前景、字体、大小等。完全定义规则，以便它们准确地说出您想要的内容，并且不会为级联留下任何空间来填充您不感兴趣的默认值在。