Question

我的问题是我要覆盖网站的样式。事实是，有一种方法可以使用!important句子来执行此操作，如this example中所示。

但是，我的文件中有成千上万的CSS指令，是否有更快捷/有效的方法来执行此操作，即不在每一行上放置!important？

Answer 1

我发现最简单，最有效的方法是将您注入的任何html模板包装在具有非常特定ID的div中。

<div id="my-specific-id">
  // Your injected HTML template or section of the website you want to change
</div>

完成此操作后，请重置可能影响该部分的所有CSS。

#my-specific-id {

  // A comprehensive CSS reset

}

// The rest of your CSS will override the reset above

以下是此类重置：http://html5doctor.com/html-5-reset-stylesheet/

请注意，您可能不会从CSS重置中获得所有内容，因此请删除与浏览器负载不相关的内容。我无法想象您确实要重置figcaption，例如。

作为撰写扩展程序的人，您应该非常关心您的扩展程序是否会破坏您注入脚本的网站上的用户体验。

我已经概述的方法将保证只更改您特别关注的网站部分。

您可以使用自己的模板（比如您想在不使用iframe的情况下向每个页面添加天气小部件）或页面的特定部分来执行此操作。例如，您可以将所有<p>元素包装在您定义的高度特定的ID中。

这是一个使用Sass的例子来自我最近正在开展的一个项目...

#specific-id-css-ultimate-reset {
html, button, input, div, p, img, form {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

@import "modules/all";
@import "components/all";
@import "popups/all";
}

<div id="my-superspecific-html-template-wrapper">
  <HTML TEMPLATE>
</div>

Answer 2

也许你可以更快地包含原来的CSS中你不希望希望在注入的样式表中覆盖的所有样式？如果是这样，您可以使用内容脚本/代码注入或阻止浏览器对CSS文件的请求从页面中删除原始样式表。

您还可以编写一个执行一些正则表达式魔法的小脚本，并将!important添加到给定CSS文件的每一行。

如何使用内容脚本有效地覆盖CSS？

2 个答案: