vue中深度选择器

当 <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>