Vue 中的深度作用选择器

在Vue里直接在 <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 新增的深度作用选择器，将会替代以上旧的选择器