Why does this happen when vue pseudo-class selectors are used in conjunction with v-if?

Why does a tag show the background color of the tag after it is styled with a pseudo-class selector and then false is set by v-if?
this won"t happen if you use v-show or style it with class without a pseudo-class selector.
isn"t v-if really destroying and rendering? Why is that? Why is this not the case even when styling with class?
is this the cause of the vue or the pseudo-class selector? I"ve tried both last-child and first-child. The code is like this. Below, you can try

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

<script>
</script>

<style scoped>
-sharpfather div:first-child{width: 100px;height: 100px;background-color: -sharpccc}
</style>
Mar.30,2022

because the aaa div does not exist when using v-if, which causes the bbb div to become the first, and finally the first-child takes effect on the bbb div

if you use v-show, the div of aaa is only hidden, but actually exists, so first-child is effective on the div of aaa, so you can't see it.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e9cf46-476e0.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e9cf46-476e0.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?