vue scoped解决样式不生效问题

使用scss语法后层级太多样式不生效的问题

<style scoped lang="scss">
  .yndl-form{
    display: flex;
    flex:1;
    .yndl-item{
      flex:0.5;
      display:flex;
      .el-form-item__label{/* 该选择器不生效 */
        flex:0.3;
      }
      .el-form-item__content{/* 该选择器不生效 */
        margin-left:0 !important;
        flex:0.7;
      }
    }
  }
  .yndl-form >>> .el-form-item__label{
    flex:0.3;
  }
  .yndl-form >>> .el-form-item__content{
    margin-left:0 !important;
    flex:0.7;

  }
</style>

• 解决方案：使用深度作用选择器
  如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符
  参考文章：https://vue-loader.vuejs.org/zh/guide/scoped-css.html