CSS вопрос о переопределении стилей

Question

У меня есть два файла css: global.css и specific.css

В моем HTML у меня есть

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

В global.css у меня есть .someForm form input.submit {background-color: #ccc;} по умолчанию. В конкретном .css у меня есть .red {background-color: red;}

Я вызываю specific.css после global.css, но кнопка не становится красной. Я остаюсь серым по умолчанию "ccc". Я не могу редактировать specific.css или редактировать старые стили global.css. (старый код опирается на него.) Я могу только добавить новый CSS в глобальный. Что я могу сделать, чтобы кнопка стала красной?

Answer 1

Как ни странно, .red сам по себе является меньшим конкретным селектором, чем глобальный .someForm form input.submit. В результате вместо кнопки «Отправить» на глобальном правиле появляется серый фон.

В любом случае, вы можете продублировать существующее глобальное правило (первое), но присоедините к нему селектор класса .red и сделайте его красным, например:

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

Добавление дополнительного класса .red к этому селектору делает его более конкретным, чем оригинальный селектор .someForm form input.submit. Поскольку ваша кнопка отправки имеет оба класса, к ней будет применено это новое правило.

Answer 2

Причина в том, что селектор, который вы указали для global.css, имеет большую иерархию, чем в конкретной.Если бы вы были на месте.someForm .red {background-color: red;} Это будет работать.Или вы можете использовать {background-color: red !important;}, но это постоянное переопределение.

Answer 3

Селектор в global.css более специфичен, чем в specific.css, поэтому он имеет приоритет.Однако вы можете применить флаг !important к значению в specific.css, чтобы он имел приоритет, например так:

.red{background-color:red!important}