代码

App.vue

<template><p>父组件</p><hello-world></hello-world>
</template><script setup>
import HelloWorld from "./components/HelloWorld.vue"</script>
<style scoped>
p{color: red;
}
:deep(.title){color: red;font-size: 20px;
}
</style>

HelloWorld.vue

<template><p>123</p><p class="title">123</p><p>123</p>
</template><script setup></script>

查看F12

由于Vue3支持多个根,父组件中有多个根

处理

- 方法一父组件修改为单根组件

<template><p>父组件</p><hello-world></hello-world>
</template><script setup>
import HelloWorld from "./components/HelloWorld.vue"</script>
<style scoped>
p{color: red;
}
:deep(.title){color: red;font-size: 20px;
}
</style>

• 方法二修改子组件为单根组件

<template><div><p>123</p><p class="title">123</p><p>123</p></div>
</template><script setup></script>