How to override CSS Background that already has !important?

问题

I am trying to override a website's background with Stylish but it isn't working. The background css for the website also has an !important, and it is overriding Stylish.

My code:

body {
  background-image: none !important; 
  background: black !important;
}

回答1:

You'll need to be more specific (quick guide to CSS specificity), for instance, using the > selector:

body {
  background-image: none !important; 
  background: black !important;
}

html > body {
  background-image: none !important; 
  background: red !important;
}

JSBin

回答2:

Firstly, I advise you to not use !important very often, try to avoid it at all.

IFf you have an element you can define the CSS path to this element more well so this overrides that. For example:

.elem { 
    color: black!important; 
}

#list1 > .elem { 
    color: red!important; 
}

回答3:

The official documentation of how specificity works is here. In a high number base specificity is simply (100 * ID rules) + (10 * class rules) + (1 * tag rules).

If you are running into a very obnoxious website or wish to use a very broad rule you can use :not(#some_id_which_you_will_never_find) to artificially increase specificity. ID rules have the highest value so you should use them.

For example I wanted to ensure that every div in a website was not marked as visibility: hidden and used this:

div:not(#oStHDi_0):not(#oStHDi_1):not(#oStHDi_2):not(#oStHDi_3):not(#oStHDi_4):not(#oStHDi_5) {
    visibility: inherit !important;
}

This has a specificity of 601.

In your case body has specificity 001, html > body is 002 and body:not(#foobar) is 101.

来源：https://stackoverflow.com/questions/23416016/how-to-override-css-background-that-already-has-important

标签

css

stylish