Как можно переопределить стиль, заданный через инлайн-атрибут style?

Что такое инлайн-стили и почему их сложно переопределить?

Инлайн-стили задаются непосредственно в атрибуте style HTML-элемента. Они имеют очень высокую специфичность (1000 баллов), поэтому обычные CSS-правила не могут их переопределить без специальных приёмов.

Основные способы переопределения

• !important — добавляется к CSS-свойству, чтобы повысить его приоритет выше инлайн-стилей. Пример:

  div { color: blue !important; }

  переопределит style="color: red".
• JavaScript — можно напрямую изменить или удалить атрибут style:

  element.style.color = 'green'; // или element.removeAttribute('style');

• CSS all: revert — сбрасывает все инлайн-стили к наследуемым или начальным значениям:

  div { all: revert; }

Практический пример

<div style="color: red; font-size: 20px;">Текст</div>

<style>
  div {
    color: blue !important; /* переопределит красный */
    font-size: 16px; /* не сработает, так как инлайн выше */
  }
</style>

В этом примере цвет станет синим из-за !important, а размер шрифта останется 20px, так как обычное правило не может переопределить инлайн.

Вывод

Используйте !important только в крайних случаях, когда нужно гарантированно переопределить инлайн-стили, например, в библиотеках компонентов. Для гибкого управления стилями лучше избегать инлайн-атрибутов и использовать CSS-классы.