html - CSS: Namespace 一段 HTML

Question

我正在构建一个浏览器扩展程序，它会将一大块 HTML 插入到某些页面中。我希望页面的 CSS 不适用于此部分。做这个的最好方式是什么？是否有一个好的重置我可以放在我的 HTML 的根元素上并将其设置为 !important 以便它在其他元素之后应用？

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

使用这个 less 代码，你既可以真正使用 less，也可以只生成一个新的 reset.css 文件并正常使用。

当然你也可以找到 element specific reset但此解决方案允许您选择最喜欢的任何重置。

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