Почему стиль из атрибута style перебивает мой класс? Как это работает
У меня в классе .btn цвет синий, но один конкретный элемент упорно красный. Оказалось, у него прямо в HTML написано style="color: red". Почему этот цвет сильнее класса и стоит ли так вообще писать?
2 ответа
Потому что инлайн-стиль (прямо в атрибуте style= у тега) — самый «сильный» из обычных способов задать стиль. По силе примерно так:
- селектор по тегу (
p) — слабее всех; - по классу (
.btn); - по id (
#btn); - инлайн
style="..."— сильнее всех (кроме!important).
Поэтому style="color: red" перебивает класс .btn { color: blue; }, даже если класс описан в файле.
<button class="btn" style="color: red">красная</button>
Так писать не стоит как основной способ: стиль приклеен к одному элементу, его нельзя переиспользовать и тяжело переопределить. Лучше вынести в класс. Инлайн оставляют для редких разовых случаев или когда стиль ставит JavaScript.
Если такой инлайн-стиль мешает и его нельзя убрать, перебить его можно только через !important в CSS — но это уже борьба костылей с костылями. Правильнее найти, кто поставил style= (часто это JS), и убрать оттуда.