如何在不使用 !important 的情况下在 Greasemonkey 脚本中覆盖页面样式？

Question

我有一个 Greasemonkey 脚本，它使用 .css() 或 GM_addStyle() 应用样式。这些样式被页面上的样式覆盖，导致不良效果。

我知道我可以通过在所有样式上使用!important 来解决此问题，但我真的不想这样做。有什么方法可以在不使用!important 的情况下做到这一点？

Answer 1

在 Greasemonkey 脚本和时尚风格中使用 !important 没有任何问题。 （它有时在常规网页中被滥用，但用户脚本不同）。

!important 是覆盖属性中设置的样式的唯一方法。例如，如果我们想改变这个：

<div id="annoyingBlock" style="background: red; top: 4em; display: inline block ... Bunch of other styles that we don't want to touch.">
    Look at me!
</div>

要拥有白色背景，我们的用户脚本必须要么覆盖 style 属性（这在大型复杂网站上可能会很痛苦，并且可能破坏我们可能仍然想要的其他内联样式），或者它必须使用 @987654327 @flag，像这样：

GM_addStyle ( "                                 \
    #annoyingBlock {                            \
        background:         white !important;   \
    }                                           \
" );

这是因为 attributes (inline styles) have a higher precedence 超过了 !important 样式之外的任何样式。

---

---

如果您使用.css() 更改的样式被页面的javascript 覆盖，请使用this answer 中的技术来解决此问题。