angular - 最後の 1 つだけをレンダリングする複数のワイルドカード Angular ng-content プロジェクション

Question

親コンポーネント (app.component.html):

<course-card (courseSelected)="onCourseSelected($event)" [course]="course">
   <div class="course-image">
       <img width="300" alt="Angular Logo" [src]="course.iconUrl">
       <h5>Total Lessons: 5</h5>
   </div>

   <div class="course-description">{{ course?.longDescription }}</div>
      Edit Description: <textarea></textarea>
</course-card>

子コンポーネント (course-card.component.html):

<ng-content></ng-content>

<ng-content select=".course-image"></ng-content>
<ng-content select=".course-description"></ng-content>

<ng-content></ng-content>

上記の例を実行すると、子コンポーネントの 2 つのワイルドカード<ng-content></ng-content>(最初と最後) のうち、最後の 1 つだけが投影され、最初のものは投影されません。両方または最初の 1 つが投影されず、最後の 1 つだけが投影されるのはなぜですか?