Как перезаписать встроенные стили с помощью CSS

Изучая CSS, часто люди думают что встроенные стили - это самая сильная форма стилей, которую нельзя изменить с помощью простого CSS.

Что ж, на самом деле есть довольно простой трюк, чтобы нарушить это правило!

Допустим, мы хотим изменить цвет текста для этого div:

<div style="color: red;">
    This text is red!
</div>

Это можно сделать, используя следующий синтаксис:

div[style] {
  color: blue !important;
}

И вуаля!

Но подождите, что произойдет, если во встроенном стиле будет указано !important?

div[style] {
    color: blue !important;
}

<div style="color: red !important;">
    This text is red!
</div>

На самом деле, для этого есть еще один необычный трюк:

@keyframes forceColor {
    from {
        color: blue;
    }
    to {
        color: blue;
    }
}

div {
    animation: 1s linear infinite forceColor;
}

Использование анимации дает необычные результаты. Похоже, браузеры отдают предпочтение результатам кадров анимации над встроенными стилями и даже в соответствии с жестким правилом !important.

Очевидно, что использование встроенных стилей и !important не рекомендуется, но иногда мы используем сторонние инструменты, которые мы не всегда можем контролировать. Эти уловки - выход из таких сложных ситуаций.