Why is an internal stylesheet using class selectors overwritten by an external stylesheet?

I have an external stylesheet that has rules for labels, making the forms throughout our project look better. They are as follows...

label { display:block; font-weight:bold; margin:7px 0; }
/* For testing purposes, I also added the following.
label { color:gold; }

There is an internal stylesheet I am using on an iframe (though I have tested on a standard ColdFusion page and it results in the same开发者_StackOverflow issue) that has the following rules for labels with the class of error.

label.error { display:inline; 
              color:red; 
              float:none; 
              padding-left:.5em; 
              vertical-align:top; }

These labels are currently hidden with a display:none attribute by jQuery's validation plugin (found at http://bassistance.de/jquery-plugins/jquery-plugin-validation/). When a form field is not properly validated, the labels are displayed. All of the above rules work properly when the label is displayed, with the exception of the display property.

As you can see in the top post, the issue is not that label.error is not overwriting already created rules, as I first suspected may be the problem.

I haven't the slightest clue why the display property will not be set properly, but if anybody can help me out that would be FANTASTIC!

Thanks,

A Frustrated Developer

EDIT: This issue was fixed by my boss, who told me that my CSS needed to be more granular. I took the EXACT label selector from the parent style sheet and added the class selector to it, then changed and added rules as necessary. If you are interested in learning more, look up docs on CSS inheritance.

I think it might to do with jQuery displaying method (fade, show etc.) that reapplies the display:block for making the element appear again. as jQuery has its own way of making things visible. what you might have to do is to not use for example .show() but instead use .css({display : 'inline'}); for making the element visible again.

To make sure whether what I am saying is true or not inspect the css applied to the label element after becoming visible by script in your firebug.

If you set up a jsfiddle or send some links or code samples the community can better establish the cause of your issue

My first thought is that the jQuery validation plugin is setting the display property on the element, thus overriding your css rules.

If you append !important to the end of the display rule in your css file, you should be able to get around this. That's a pretty nasty solution, IMO, and you should probably look at a different way to work with jQuery.validate, instead of against it, but that's up to you :)