:nth-child(n)

选择器匹配父元素中的第 n 个子元素，元素类型没有限制

实现代码：

<template>
  <div class="jo">
    <p>1</p>
    <p>2</p>
    <p>3</p>
  </div>
</template>
<style lang="scss" scoped>
.jo {
  border: 1px solid white;
  font-size: 20px;
  color: white;
  width: 400px;
  text-align: center;
  p {
    line-height: 30px;
    &:nth-child(1) {
      background: red;
    }
    &:nth-child(2) {
      background: green;
    }
    &:nth-child(3) {
      background: blue;
    }
  }
}
</style>

:first-child、:last-child

• :first-child 选择器用来匹配父元素中第一个子元素。
• :last-child 选择器用来匹配父元素中最后一个子元素。

<template>
  <div class="jo">
    <p>1</p>
    <p>2</p>
    <p>3</p>
  </div>
</template>

<style lang="scss" scoped>
.jo {
  border: 1px solid white;
  font-size: 20px;
  color: white;
  width: 400px;
  text-align: center;
  p {
    line-height: 30px;
    &:first-child {
      background: red;
    }
    &:last-child {
      background: blue;
    }
  }
}
</style>