Question

I still dont get it, which color will be paragraph “test1” and why?

<style>
  p {
    color: red; 
    font-style: italic;
  }
</style>

<div style="color: green;!important">
  <p style="color: blue;">test1</p>
  <p>test2</p>
</div>

Answer 1

Importance does not cascade.

Even if a parent element (the <div>) has an !important property (note that it actually doesn’t, due to a syntax error), it will still be overridden by any property applied to the child element.

!important can only override other rules that are applied to the same element.

Therefore, the first <p> will be blue, since there is nothing to override its inline style.