html - What priority are CSS styles applied? Example provided that is confusing me -

i know should stupidly easy topic, i'm confused , spent way longer should trying understand example professor gave us.

from understand, rules supposed go first inline css, document css, external css, , priority. priority thought 100*ids+10*class+1*element reference.

here code that's confusing me below:

<div id="id1">    <ul>      <li class="c1" id="id2">item 1</li>	      <li class="c2 c3">item 2</li>      <li class="c3">sublist:			        <ul>          <li class="c1">subitem 1</li>          <li class="c2">subitem 2</li>          <li class="c2" id=”id3”>subitem 3</li>        </ul></li>      <li>item 4</li>    </ul>    <div id="id4">      <ul>        <li id="id5">one thing</li>        <li id="id6" class="c2">and thing</li>        <li id="id7" class="c1">a third thing.</li>      </ul>    </div>  </div>    <style>  div > li   {    color: yellow;  }  .c2  {    color: red;  }  ul li+li+li  {    color: green;  }  #id1, #id4   {       color: orange;  }  #id7   {    color: blue;  }  </style>

in above code though, item 2 red, sublist(+subitem1) green, etc. how possible? why isn't coming out orange? shouldn't #id1 style applied automatically since 1 id specifier(and child of div id="id1"?

the priority formula wrote ok if have 2 rules same element.

in css child element inherits parents colors, in example.

if new rules, despite having lower specificity number, applied child, override inheritance.

anyway read this: https://css-tricks.com/specifics-on-css-specificity/