why apply child selector other child?

i study css, but child selector is not work well.

<style>
    header > p{
        color: red;
    }
</style>
<header>
    <p>
        aaa
        <div>bbb</div>
    </p>
</header>

it works only aaa is red, bbb is not apply
but

 <style>
    header > div{
        color: red;
    }
</style>
<header>
    <div>
        aaa
        <p>bbb</p>
    </div>
</header>

it apply aaa and bbb
why do this work?

>Solution :

This is because your first example is not valid HTML

According to the specification, <p> elements don’t allow block elements like <div> inside it.

So the browser (using the tag omition rules), closes the <p> element before the <div> and then opens a new <p> when encounter the </p> closure.

You can see it yourself in the browser console. Also some tools will point you that this is not a valid arrangement of DOM elements.

If you change the <div> to a <span> you will see that it takes the red color as you expect

You can read more here in this complete answer: https://stackoverflow.com/a/10763952/17537072