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

一、问题

二、原因及解决方法

三、总结

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

一、问题

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

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

二、原因及解决方法

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

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

<template><div class="test-area"><divclass="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"><divclass="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>