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

#html #css #forms #css-selectors

#HTML #css #формы #css-селекторы

Вопрос:

У меня есть два 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;} по умолчанию.
В specific.css у меня есть .red {background-color: red;}

Я вызываю specific.css после global.css, но кнопка не становится красной. I по умолчанию остается серым «ccc». Я не могу редактировать конкретный файл.css или редактировать старые глобальные стили.css. (более старый код полагается на это.) Я могу добавить новый CSS только в глобальный. Могу ли я что-нибудь сделать, чтобы кнопка стала красной?

Ответ №1:

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

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

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

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

1. Я не уверен достаточно, чтобы опубликовать его в качестве ответа, но будет ли работать !important над .red классом?

2. @cabaret: Это, конечно, было бы, но я бы использовал вместо этого более конкретный селектор. Конкретный файл.css в любом случае не может быть изменен.

3. Чтобы расширить ответ BoltClock, рассматриваемая проблема заключается в «специфичности» вашего селектора (с точки зрения непрофессионала, ваш селектор недостаточно специфичен). Загуглите термин «Специфичность CSS» для получения дополнительной информации о том, как специфичность работает и вычисляется. Другие темы, которые вы, возможно, захотите изучить, — это наследование CSS и каскад.

Ответ №2:

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

Ответ №3:

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

.red{background-color:red!important}