vue伪类选择器和v-if联合使用为什么会这样？

Question

一个标签用伪类选择器设置样式然后v-if设置false后为什么还会显示这个标签的背景颜色？
如果用v-show则不会有这种现象 或者不用伪类选择器用class设置样式也不会发生这种情况
v-if不是真正的销毁和渲染吗？这是为什么呢？为什么用class设置样式也不会有这种情况？
这是vue的原因还是伪类选择器的原因？last-child和first-child我都试了一下 都会这样 代码在下面大家可以试一下

<template>
 <div>
  <div id="father">
    <div v-if="false" class="test">aaa</div>
    <div>bbb</div>
  </div>
 </div>
</template>

<script>
</script>

<style scoped>
#father div:first-child{width: 100px;height: 100px;background-color: #ccc}
</style>

Answer 1

因为使用的是v-if的时候，aaa这个div是不存在的，这就导致bbb这个div就变成了第一个，最终first-child对bbb这个div生效

如果是用v-show，则aaa这个div只是隐藏，实际是存在的，所以first-child是对aaa这个div生效，所以看不到。