Vue 中父组件修改子组件（局部修改）

知识点：在 <style scoped> 中使用 >>>

 父组件 css.vue

<template>
<div class="css-main">
    <sub-css></sub-css>
</div>
</template>

<script>
import SubCss from '../components/SubCss.vue'
export default {
  components: { SubCss }
}
</script>
<style scoped>
.css-main >>> .txt {
    background:red
}
</style>

子组件 SubCss.vue

<template>
<div class="sub-css-main">
    <h1 class="txt">这是一个子组件</h1>
</div>
</template>

效果