Как переопределить стили страниц без использования! Важно, в сценарии Greasemonkey?

Question

У меня есть сценарий Greasemonkey, который применяет стили с .css() или GM_addStyle(). Эти стили переписываются стилями, которые находятся на странице, что вызывает нежелательные эффекты.

Я знаю, что могу исправить это, используя !important по всем моим стилям, но я действительно не хочу этого делать. Есть ли способ сделать это без использования !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> 

иметь белый фон, наш userscript должен либо перезаписать, что style атрибут (который может быть права болью на больших сложных участках и может разорить другие встроенные стили мы может все еще хотите) или он должен использовать !important флаг, например, так:

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

Это происходит потому, что attributes (inline styles) have a higher precedence над чем, кроме !important стилей.

---

---

Если изменения стиля с использованием .css() становятся перезаписаны JavaScript страницы, используйте технику как в this answer бороться с этим.