CSS question about overriding styles

I have two css files, global.css and specific.css

In my HTML I have

<div class="someForm">
    <form>
        <input type="submit" class="submit red">
    </form>
</div>

In gl开发者_如何学运维obal.css I have .someForm form input.submit {background-color: #ccc;} as default. In specific.css I have .red {background-color: red;}

I'm calling specific.css after global.css, but the button isn't turning red. I stays the default grey "ccc". I cannot edit specific.css or edit the old global.css styles. (older code relies on it.) I can only add new CSS to global. Is there something I can do to make the button red?

Ironically, .red itself is a less specific selector than the global .someForm form input.submit. As a result, your submit button takes on a grey background from the global rule instead.

Anyway, you can duplicate the existing global rule (the first one), but attach the .red class selector to this one, and make it red like this:

.someForm form input.submit.red { background-color: red; }

Adding the extra .red class to this selector makes it more specific than the original .someForm form input.submit selector. Since your submit button has both classes, this new rule will be applied to it.

The reason is that the selector you have specified the global.css has a larger hierarchy than that in the specific. If you were to place. someForm .red {background-color: red;} It would work. Or you can use {background-color: red !important;} but that is a permanent override.

The selector in global.css is more specific than the one in specific.css, so it takes priority. However, you can apply the !important flag to the value in specific.css so that it takes precedence, like so:

.red{background-color:red!important}