当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素
//父组件
<template>
<div class="example">
<child></child>
</div>
</template>
<style scoped>
.example {
color: red;
}
</style>
//子组件
<template>
<div class="text"></div>
</template>
父组件添加scoped属性，样式不会应用到子组件,想要在父组件中设置子组件元素样式
方法1:
混用本地和全局样式
<style scoped>
.text{
color: red;
}
</style>
方法2:
使用vue的深度作用选择器>>>，不能使用less或者scss，预处理器无法解析>>>,报错
<style scoped>
.example >>> .text{
color: red;
}
</style>
方法3:
使用 /deep/ 选择器，可作用于less和scss
<style lang="less" scoped>
.example /deep/ .text{
color: red;
}
</style>
