Geek asks and answers

CSS Question on Style Overriding

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

In my HTML, I

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

In global.css it is used by default .someForm form input.submit {background-color: #ccc;}. In specific.css I have.red {background-color: red;}

I call specific.css after global.css, but the button is not red. I remain gray by default "ccc". I cannot edit specific.css or edit old global.css styles. (The old code relies on it.) I can only add new CSS to the global one. Is there something I can do to make the button red?

+3
source share
3 answers

Ironically, .reditself is a less specific selector than the global one .someForm form input.submit. As a result, your submit button takes a gray background from the global rule.

(), .red , :

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

.red , .someForm form input.submit. , .

+8

, , global.css, , . . someForm .red {background-color: red;} . {background-color: red !important;}, .

0

global.css , , specific.css, . !important specific.css, , :

.red{background-color:red!important}

-1

More articles:


All Articles