第n个孩子选择了错误的孩子

Question

由于某些原因，nth-child（1）没有选择第一个p元素。但是，如果我放置nth-child（2），它将选择第一个元素。我经常使用nth-child，我的代码没有发现任何问题。有人可以解释为什么会这样。谢谢

#canvassing_page #canvassing p {
  font-size: 1.6rem;
}

#canvassing_page #canvassing p:nth-child(1) {
  background-color: blue;
}

<section id="canvassing_page">
  <section id="canvassing">
    <div class="container">
      <div class="row">
        <div class="col-8">
          <div>
            <h1 class="heading font_blue border_orange">CANVASSING</h1>
          </div>

          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean felis libero, finibus efficitur fermentum quis, facilisis ut lacus. Suspendisse a vehicula elit. Aliquam eu feugiat arcu. Sed justo mauris, sollicitudin molestie fringilla vestibulum,
            egestas in neque. Phasellus nec egestas dolor. Aliquam mollis posuere lacus, et eleifend elit aliquam eget. Integer ut sapien a felis vehicula hendrerit. Nam tortor leo, porta in iaculis at, tempor eu purus. Aenean cursus congue ante. Curabitur
            non convallis libero. Duis fermentum mollis turpis.</p>

          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean felis libero, finibus efficitur fermentum quis, facilisis ut lacus. Suspendisse a vehicula elit. Aliquam eu feugiat arcu. Sed justo mauris, sollicitudin molestie fringilla vestibulum,
            egestas in neque. Phasellus nec egestas dolor. Aliquam mollis posuere lacus, et eleifend elit aliquam eget. Integer ut sapien a felis vehicula hendrerit. Nam tortor leo, porta in iaculis at, tempor eu purus. Aenean cursus congue ante. Curabitur
            non convallis libero. Duis fermentum mollis turpis.</p>
        </div>
      </div>
    </div>
  </section>
</section>