vue 深度作用选择器 ＞＞＞、/deep/、::v-deep

目录

• 一、 介绍
• 二、 ＞＞＞
• 三、 /deep/
• 四、 ::v-deep

一、 介绍

1. vue项目中，会使用elementUI等组件库，有些样式直接在组件中修改无效，又因为scoped局限于当前组件，去掉scoped的话又会影响全局样式。所以会用深度作用选择器来修改样式。

二、 ＞＞＞

1. 如果项目style使用的是css 原生样式,那么你可以直接使用 >>> 穿透修改

   <style scoped>
     .hide >>> el-upload--picture-card {
         display:none;   /* 上传按钮隐藏 */
     }
   </style>
   
   

三、 /deep/

1. 项目style中用到了css预处理器 scss 、sass、less时， 操作符 >>> 可能会因为无法编译而报错 。可以使用 /deep/
2. 但是在vue-cli3编译时，/deep/的方式会报错或者警告，导致变异报错。这个时候用::v-deep

   <style scoped lang="scss">
     .hide /deep/ .el-upload--picture-card{
       display:none;   /* 上传按钮隐藏 */
     }
   </style>
   
   

四、 ::v-deep

1. ::v-deep在预处理器 scss 、sass、less 比较通用
2. 切记必须是双冒号，是::v-deep而不是::deep

   <style lang="scss" scoped >
      .hide{
        ::v-deep .el-upload--picture-card {
          display:none;
        }
      }
   </style>