作用:
当你不想写全局样式,想写scoped局部样式不污染全局,又想更改子组件内的样式,此时就可以用/deep/深度作用选择器

在了解/deep/之前需先了解scoped属性作用：https://blog.csdn.net/weixin_45842655/article/details/103490900 看官方文档 比较全面：https://vue-loader.vuejs.org/zh/guide/scoped-css.html

一、 scoped属性

1.scoped会给局部区域的非组件元素和组件根元素(不含组件内子元素)增加一个不重复的data属性
2.加了scoped后若写样式,会在每句css选择器的末尾（编译后生成的css语句）加一个当前组件(大的.a)的data属性选择器,若多层也是给最后末尾设置

  1. //.a为大div父组件 .b为子组件根元素 .c为子组件内的子元素
  2. .a .b .c{//多层
  3.   color:red
  4. }
  5. //会渲染成
  6. .a .b .c[data-v-2311c06a]{
  7.   color:red
  8. }

二、 /deep/深度作用选择器

当scoped时，#app是父组件 button是子组件内的子元素 [data-v-7ba5bd90]是app的属性

  1. //渲染前的源代码 
  2.   #app button{
  3.     background-color: red;
  4.   }
  5.   #app /deep/ button{
  6.     background-color: yellow;
  7.   }
  1. //不加/deep/的渲染效果 样式无效
  2. #app button[data-v-7ba5bd90] {
  3.     background-color: red;
  4. }
  5. //加了/deep/的渲染效果 样式有效
  6. #app[data-v-7ba5bd90] button {
  7.     background-color: yellow;
  8. }
  • [data-v-7ba5bd90]是app的属性,button是子组件内的子元素并无此属性,所以不加/deep/样式,获取不到元素,样式无效
  • 加了/deep/后 属性选择器跑到前面去了
  • 多个/deep/的情况下,只有最外层的/deep/有效,内层的其他/deep/都是无效的,写了也没意义,不建议写

    三、 /deep/和 >>>以及 ::v-deep 三者的区别

    >>>

    深度作用选择器的简写形式
  1. 只作用于css，不支持css预加载器（less/scss）

  2. 是/deep/的简写形式,适用于Vue2.x版本，Vue3.x版本使用会报错

    /deep/

    Vue2.x的深度作用选择器正式写法

  3. 仅适用于Vue2.x版本

  4. 支持css预加载器

    ::v-deep

    Vue3.x的深度作用选择器正式写法
    在scss中使用/deep/会报loader错误,这时可以使用::v-deep来代替

总结：
Vue2.x版本使用优先级 /deep/ > >>>
Vue3版本使用::v-deep