如何使用CSS为所有类覆盖背景颜色？

Question

I'm using a CSS theme that I'm not allowed to edit, I need a way to paint all the white backgroud-color with something less shiny.

I'm new to CSS , what should I do to override the background-color for all classes using CSS ?

Here is a screen shot, I'm using Primefaces to generate the web content hence I'm unable to change the provided CSS

A screen shot of what I'm trying to change

I already understand that every element has it's own class in the theme, but I don't know their names, nor which one of these classes provide the background-color for those elements, what I'm looking for is a simple way to repaint the white color in the whole page.

Answer 1

From the official documentation :

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.

And also:

Specificity is based on the matching rules which are composed of CSS selectors of different sorts.

That means that the CSS would be applied depending of your browser and your CSS Selectors for that browser.

And you should also look at what CSS Selectors has a higher specificity.

But as you want to override the background-color , that means to get the higher CSS Selector specificity I think what you are looking for is the !important exception .

Again from the documentation:

this declaration overrides any other declarations.

that means that the property of CSS that you are going to set with !important exception will be applied overriding the rest of different configurations that has that property.

But also, you have to care about to abuse of that property:

Using !important is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets.

What I recommend:

• Try to set your background-color with CSS Selectors with higher specificity.

• If you cannot modify the property, and you have tried all the posibilities, then use !important exception.

Answer 2

You can paste this into the bottom of your page right before the tag.

<script>
    document.body.style.backgroundColor = "#883377";
</script>

You can the change the #883377 to whatever color you would like.