深度作用选择器

直接在 <style lang="scss" scoped> .... </style> 中编写样式的话只会影响当前组件内的样式，但如果去掉 scoped 话又会影响全局样式，这时候需要使用深度作用选择器

推荐使用 ::v-deep :deep()

1. >>> style 为 css 时使用

   像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。

   <style lang="css" scoped>
   .a >>> .b { 
    /* ... */ 
   }
   </style>

2. /deep/ style 使用预处理器时使用，Vue3 不可用

   在 vue-cli3 编译时，/deep/ 的方式会报错或者警告

   <style lang="scss" scoped>
   .a{
    /deep/ .b { 
     /* ... */ 
    }
   } 
   </style>

3. ::v-deep

   当我们需要覆盖 element-ui 中的样式时只能通过深度作用选择器

   <style lang="scss" scoped>
   .a{
    ::v-deep .b { 
     /* ... */ 
    }
   } 
   </style>

4. :deep()

   Vue3 新增的深度作用选择器，将会替代以上旧的选择器