:last-child选择器不起作用

我们在开发的时候，想要为最后一个元素设置一些特殊的操作，css默认为我们提供了:last-child选择器，但是在实际使用中，要特别需要注意一个点。

:last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。
为本文写了个demo来说明:last-child选择器不起作用的原因。
html代部分：

<template>
  <el-card shadow="never">
      <p>第一个段落。</p>
      <p>第二个段落。</p>
      <p>第三个段落。</p>
      <p>第四个段落。</p>
      <p>第五个段落。</p>
    </el-card>
</template>

css部分：

<style lang="scss" scoped>
  p:last-child{
    background: pink;
  }
</style>

效果图片：

image.png

现在我们在其中的p标签里面定义类名，让类名的最后一个加背景颜色

<template>
 <el-card shadow="never">
      <p>第一个段落。</p>
      <p class="box">第二个段落。</p>
      <p class="box">第三个段落。</p>
      <p>第四个段落。</p>
      <p>第五个段落。</p>
    </el-card>
</template>

css部分：

<style lang="scss" scoped>
.box:last-child {
  background: pink;
}
</style>

效果图：

image.png

现在问题来了，我们想要的效果没有实现，打开chrome的控制台看了一下，代码没执行，去网上查了一下，原来是这些p标签没有形成闭合区间

附：

image.png