Vue进阶（幺幺捌）：CSS3 - 选择器first-child、last-child、nth-child

在CSS中，first-child、last-child和nth-child(3)是用来选择元素的特定子元素的选择器。

1. first-child选择器用来选择父元素的第一个子元素。
2. last-child选择器用来选择父元素的最后一个子元素。
3. nth-child(3)选择器用来选择父元素下的第三个子元素。

以下是这些选择器在Vue模板中的使用示例：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index" :class="{'first': index === 0, 'last': index === items.length - 1, 'third': index === 2}">
        {{ item }}
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4']
    };
  }
};
</script>
 
<style>
.first {
  color: red; /* 第一个子元素的颜色 */
}
.last {
  color: green; /* 最后一个子元素的颜色 */
}
.third {
  color: blue; /* 第三个子元素的颜色 */
}
</style>

在这个示例中，我们使用了Vue的v-for指令来循环生成列表项，并通过计算属性为特定的元素添加了类名来模拟CSS选择器的效果。这样做的好处是，不需要使用复杂的CSS选择器，可以在JavaScript逻辑中更灵活地处理元素的样式。