How to override inline CSS without using !important or javascript?

I'm afraid the !important clause is specifically created as the solution for this. It would be impractical for CSS to implement different degrees of priority, apart from the now-used style block < inline < !important priority.

No, inline style takes precedence, you can override it only with !important.

Try this:

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