CSS 3:first-childとfirst-of-typeの違い

次のコードブロックはhtml構造であり、first-childとfirst-of-typeを使用してそれぞれcss操作を行い、違いを見つけます.

<div id="example">
    <p>1p>
    <div>2div>
    <div>3div>
div>

1、first-child

#example>div:first-child {
     
    background-color: pink;
}

first-childは、彼の作業手順が次のようになっているため、要素を選択していません.
①すべての#exampleのchildrenを一列に並べる
②最初のchildを見つける
③最初のchildがdivであれば選出
最初のchildがdivでないため、検索に失敗し、css効果は発生しません.
2、first-of-type

#exzmple>div:first-of-type {
     
    background-color: pink;
}

first-of-typeは内容2のdivを選択した.理由は以下の通りである.
①すべての#exampleのchildrenのdivを一列に並べる
②最初のchildを見つける
この例の最初のdivを選択しbackground-colorをpink色に変更しました