Дочерние селекторы

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p

Paragraphs are block-level elements, and notably will automatically close if another block-level element is parsed before the closing </p> tag.

то есть

Параграф (абзац) - это блоковый (перевод?) элемент, он автоматически закрывается, если другой блоковый элемент начинается до того, как встретился закрывающий </p> тэг.

Таким образом, в DOM-дереве страницы нет элементов h1 внутри элементов p. То же самое - для элементов h2 внутри элементов h1.

Про тег <p> я понял, но не понял про h1>h2

h1 и h2 - это тоже блоковые элементы, один не может быть внутри другого. Даже если Вы напишете разметку html как в вопросе, браузер все равно создаст невложенные элементы h1 и h2.

<h1>Текст1<h2>Текст2</h2></h1>

div>h1 { 
  color: red; 
} 
 
div>h2 { 
  color: blue; 
} 
 
div i { 
  color: green; 
}

<div> 
  <p>Известно, что пустыня обладает неправильной формой, которую принимаем прямоугольной. Это достигается одним из двух способов — 
    <i>включением частей</i>, выходящих за пределы области пустыни или их <i>отбрасыванием</i></p> 
</div> 
<div> 
  <h1>Текст1</h1> 
  <h2>Текст2</h2> 
</div>

Знак > ставить необязательно, достаточно пробела.

Если у тебя стоит цель из заголовков построить визуально предложение или что-то вроде этого, то:

div.zagolovki, h1, h2 { 
    display: inline-block; 
} 
div.zagolovki h1 { 
    margin-right: 5px; 
}

<div class="zagolovki"><h1>Текст1</h1><h2>Текст2</h2></div>