angular - 多个通配符 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>

当我运行上面的示例时，在子组件中的两个通配符<ng-content></ng-content>（第一个和最后一个）中，只有最后一个被投影，而不是第一个。为什么两个或第一个都没有被投影，只有最后一个？