自定义类不覆盖其他CSS

Question

I am by no means a CSS expert, so I probably just don't understand something simple here.

I have a site I am maintaining. Most of the site has a dark background with white text. I was asked to change a couple of pages to black text on white background.

I created a class named .blog in the CSS, it looks like this:

.blog{
color:rgb(0,0,0);
background-color:rgb(255,255,255);
}
.blog h1,h2,h3,h4,h5,h6
 {
color:rgb(0,0,0);
}
.blog a:link,a:visited,a:hover
{
color:rgb(0,0,0);
}   

Earlier in the file is this:

body,a,.white{color:#fff;}

When I wrap a chunk of a page in the text and background change but the links and headlines remain white (and are thus invisible on the white page).

When I check using Firebug it shows my blog class being applied, including when I select the headline or link elements. Yet of course it is not.

Can anyone suggest a reason for this? Or perhaps where I should look for the most likely solution?

Answer 1

You have to add the class before the element to specify under what circumstances which item is being selected.

Thus

.blog h1,h2,h3,h4,h5,h6
 {
color:rgb(0,0,0);
}

should be

.blog h1, .blog h2, .blog h3, .blog h4, .blog h5, .blog h6 {
color:rgb(0,0,0);
 }

and so on.

Answer 2

You can always try and add !important to the end of your class.

For example:

background-color:rgb(255,255,255) !important;

This will override any element that is over-styling the background-color of your blog class for instance. Though I do not recommend using this all of the time as you can end up causing yourself conflicting issues but it is there for cases like this.

Definitely give it a shot and see if it fixes your issue, if it does then you have another class that is overriding your styling, or your class styling is not correctly being issued where you think it is.