最近在软件开发中使用的element-ui的框架，在使用el-menu菜单、el-card卡片等组件的时候，根据设计需要对默认的行高及背景进行覆盖修改，修改了很多次都没发现有效。放在一边卡了三四天，今天突然看vue-admin-element的框架时候，::v-deep在做样式修改，发现可使用穿透修改样式问题。

解决：在当前的vue文件样式部分加入穿透指令，如下

::v-deep .el-submenu__title{
      height: 35px !important;
      line-height: 35px !important;
    }

总结：

1.如果当前软件开发项目选用的是css原生样式，那么可以直接使用 >>> 穿透修改，如

<style scoped>
    .lenian >>> .lizuo { 
     /* ... */
    }
  </style>

2.如果当前软件开发项目中前端选用了预处理器 scss 、sass、less 操作符 >>> 会可能因为无法编译而报错 。
此时可以改用 /deep/，如下
注意：vue-cli3以上版本不可以

  <style scoped>
    /*使用法1*/
      .liaonian {
       /deep/ .lee { 
        /* ... */
       }
      } 
      /*使用法2*/
      .lizuo /deep/ .liaonian { 
        /* ... */
       }
    </style>

3.如果当前软件开发中前端使用了预处理器(sass,stylus等等)都可以使用 ::v-deep穿透指令

 <style scoped>
   	/*用法1*/
    .liaonian{
     ::v-deep .lee { 
      /* ... */
     }
    } 
    /*用法2*/
    .lizuo ::v-deep .lee {
      /* ... */
    }
    </style>