1

我的问题是我想覆盖网站的样式。问题是，有一种方法可以做到这一点，使用!important句子，如本例所示。

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

4

2 回答 2

3

我发现最简单和最有效的方法是将您注入的任何 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>
于 2015-06-30T01:39:03.907 回答
0

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

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

于 2012-05-16T06:50:18.143 回答