javascript - 如何防止 CSS 干扰注入(inject)的 HTML 片段？

Question

我目前正在开发一个 Safari 扩展，它使用注入(inject)脚本进一步将一些 HTML 注入(inject)当前网页，以及注入(inject)一些其他脚本以使其工作。这一切工作正常，但问题是注入(inject)的 HTML 受到网页已经导入的 CSS 样式表的影响。例如，HTML 在 Google.com 上看起来很完美(CSS 样式相对较少)，但在 StackOverflow.com 上却很糟糕(按钮样式等)。

在显示此 HTML 时将 jQuery 注入(inject)网页，因此我可以使用它。我尝试了各种方法，包括遍历所有元素并在每个元素上调用 removeClass()，但都无济于事。我还尝试添加“CSS 重置”类等，但似乎没有任何效果。

防止 CSS 干扰我的 HTML 的最佳方法是什么？

Answer 1

您无法阻止这种情况的发生。但是，您可以覆盖 CSS 规则。给你的主要元素一个唯一的 id(它真的应该通过混淆来唯一，比如“yourapplicationname_mainelement_name”或其他东西)，然后覆盖所有可能会给你的 html 带来奇怪效果的样式。

你的插件:

<div id="yourapplicationname_mainelement_name">
  <p>My paragraph that must not be styled</p>
</div>

你的CSS:

#yourapplicationname_mainelement_name p {
  display: block;
  color: black;
  background: white;
  position: relative;
  ... and so on ...
}

由于您的 css 样式规则是最具体的，给定您的 ID，它们将覆盖注入(inject)您的 html 的页面上存在的任何设置。

此外...可能很难看出哪些规则是最重要的。您可以使用 Firebug 或类似的东西来了解哪个覆盖另一个。如果没有它，您将很难开发应用程序。