Question

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

Answer 1

您可以使用重置CSS并将其仅应用于您网页的一个子集。例如this one。

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 */
}

使用这些较少的代码，你可以真正使用更少的代码，或者只是生成一个新的reset.css文件并正常使用它。

当然你也可以找到element specific reset但是这个解决方案允许你选择你最喜欢的重置。

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

Answer 2

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

你可以使用css重置样式表，但只需用你的根元素id / class作为前缀。这对于对抗效果会有很长的路要走，但在现场你可能需要做更多的最后调整。

可能最好的方法是简单地设置子规则的每个合理属性。所以我的意思是设置背景，前景，字体，大小等等。完全定义规则，以便他们准确地说出你想要的，并且不要为级联留下任何空间来填写你不感兴趣的默认值英寸