Vue-深度选择器

 在使用vue的时候，为了避免组件之间相互影响，可以在样式中加入一个css样式。

但是这样的直接坏处是父组件的样式不会渗透到子组件中去。
vue提供了深度作用选择器可以解决这个问题：

<template>
  <div class="aa">
    <a-breadcrumb>
      <a-breadcrumb-item>首页</a-breadcrumb-item>
    </a-breadcrumb>
    <a-button>TEXT</a-button>
  </div>
</template>

<style scoped>
.aa .ant-btn span{
color: red;
}
</style>

此时想让TEXT变成红色，你会发现并没有改变

如果使用了深度选择器 就会改变**。>>>**

<style scoped>
.aa .ant-btn >>> span{
color: red;
}
</style>

但是如果使用sass也是不可以解析的。需要使用**/deep/**才可以。

<style scoped lang='scss'>
.aa .ant-btn >>> span{
color: red;
}
</style>
这样是没有效果的 需要写成这样 才可以。

```css
<style scoped lang='scss'>
.aa {
.ant-btn {
&/deep/ span{
color: red;
}
}
}
</style>