css伪类:last-child或:first-child不生效

news2025/1/23 11:25:19

一、问题

二、原因及解决方法

三、总结

tiips:如嫌繁琐，直接移步总结即可！

一、问题

1.想使用伪类:last-child给 for循环出来的最后一个元素单独添加样式。但是发现无论怎么写都没有添加上去。

2.真是奇怪呀，明明写的没有问题呀，但是检查元素的时候确实看不到样式。

二、原因及解决方法

1.预期效果：最后一个元素红色；最后一个元素绿色

html如下，效果如下图2-1所示

<template>
    <div class="test-area">
      <div
        class="test-box"
        v-for="(firstItem, firstKey) of firstData"
        :key="firstKey"
      >
        {{ firstItem.label }}
      </div>
      <div class="other-area"></div>
    </div>
</template>
<script lang="scss" scoped>
  .test-area {
    color: #333;
    .test-box {
      &:last-child {
        color: green;
      }
      &:first-child {
        color: red;
      }
    }
  }
</script>

2.为什么最后一个元素不是绿色呢？ 为什么 :first-child可以，:last-child不生效呢？

检查元素，发现第一个元素添加了 :frist-child伪类样式，最后一个元素却没有。如图2-2所示

3.删除 <div class="other-area"></div> 竟然好了

4.把 <div class="other-area"></div> 放在第一个test-box前面，:first-child竟然失效了！！！！！！

5.原因：:first-child只在被选中的第一个元素前面没有其他元素才生效；

:last-child只在被选中的最后一个元素后面没有其他元素时才生效

上面的代码中.test-box:last-child后面还有同级的元素 other-area，所以不生效

6.解决方法：在被循环的test-box外面添加一个父盒子如图2-5所示

代码如下：

<template>
    <div class="test-area">
      <div class="box-area">
        <div
          class="test-box"
          v-for="(firstItem, firstKey) of firstData"
          :key="firstKey"
        >
          {{ firstItem.label }}
        </div>
      </div>
      <div class="other-area"></div>
    </div></template>
<script lang="scss" scoped>
  .test-area {
    color: #333;
    .test-box {
      &:last-child {
        color: green;
      }
      &:first-child {
        color: red;
      }
    }
  }
</script>