javascript - How to override page styles without using !important, in a Greasemonkey script?

Question

I have a Greasemonkey script that applies styles with either .css() or GM_addStyle(). These styles are getting overwritten by the styles that are on the page, causing undesired effects.

I know that I can fix this by using !important on all of my styles, but I really don't want to do this. Is there any way to do this w/o using !important?

Answer 1

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

!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属性（这在大型复杂网站上可能是一种痛苦，并且可能破坏我们可能仍然想要的其他内联样式），或者它必须使用!important标志，如下所示：

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

这是因为属性（内联样式）比样式以外的任何东西都具有更高的优先级!important。

---

---

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