一、父子组件设置scoped的各种情况
例如有下面两个父子组件模板
Parent.vue
<template><div class="parent-box"><p>parent</p><child></child></div></template><script setup lang="ts">import Child from '@/views/test/style-scoped/Child.vue';</script><style>.test {color: blue;}</style>
Child.vue
<template><div class="child-box"><p class="test">child</p></div></template><script setup lang="ts"></script><style scoped>p {color: green;}</style>
（1）父组件和子组件都设置了scoped
则父组件和子组件的样式互相隔离，互不干扰。
但也有例外，当子组件为单个根节点的时候，会加上父组件的data-v-[hash:8]。这个时候当在子组件的根节点上加上父组件中定义的样式的时候，父组件会影响子组件根元素的样式。
<template><p class="test">child</p><!-- <div class="child-box"><p class="test">child</p></div>--></template>
渲染后父组件中的test类的样式会影响子组件。
（2）父组件不设置scoped,子组件设置scoped
则父组件的样式为全局样式，会影响子组件的样式。
（3）父组件设置scoped，子组件不设置scoped
则子组件的样式为全局样式，会影响父组件中的样式。
（4）父组件和子组件都不设置scoped
则父子组件的样式都为全局样式，父组件的样式会影响子组件，子组件的样式也会影响父组件。
会根据选择器的优先级来进行覆盖。
二、样式穿透
当父组件和子组件都设置了scoped，可以在父组件中使用 :deep()来更改子组件中的样式。
:deep(.test){color: blue;}
