Коротко
Inline-стиль (style="...") бьёт классы и id в каскаде: в классической записи это 1,0,0,0 (выше id 1,0,0).
Иерархия (упрощённо)
- Transition/animation (отдельная история)
!important (сравнение среди important)
- Inline style
- id
- class / attribute / pseudo-class
- элементы / pseudo-elements
<div id="box" class="box" style="color: red;">Текст</div>
#box { color: blue; }
.box { color: green !important; }
Инлайн + !important почти непобедимы — плохой запах в поддержке.
Итог
Inline сильнее селекторов без !important. Для темы/состояния лучше классы и переменные, а не style=.