Priority in CSS (id VS. type..)

Question

Hi, I saw that someone said 'id > class > type' and '!important' can change this order.
But I feel confused when I run the code below:

[html]
<div id="why">
<p>first</p>
</div>
<p>second</p>

[CSS]
p{color: white; background-color: black;}
#why{color: white; background-color: blue;}

The results showed black 'first' and 'second'. I expected to see blue 'second' though.
Also, I found that when I add

<p class="ok">third</p>
.ok{color: white; background-color: yellow;}

it worked(yellow 'third').
(So I think this is because.. 'class' is directly included in <p> tag.)

In short, I thought that as the <p> is included in the <div>, the <div>'s id will have more importance.
Then could you explain me why this happens?

Thanks

Answer 1

Yes, you guessed almost right:

priority is checked only in case of same element selected but with different selectors (if same priority later rule overide former rule)...

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

https://www.w3.org/wiki/Css/Training/Priority_level_of_selector