why apply child selector other child?-CodePudding

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?

CodePudding user response：

This is because your first example is not valid HTML

According to the

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