css层级穿透

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

<style scoped>

/*编译前*/ .a >>> .b { /* ... */ }

/*编译后*/ .a[data-v-f3f3eg9] .b { /* ... */ }

</style>

2.vue2中使用修改element-ui vant组件

@deep: ~">>>";

@{deep} .el-input__inner {

padding: 4px 65px;

}

注意:不能嵌套 如:

.el-input{

   @{deep} .el-input_inner{ -------------(不能这样嵌套使用)

}

}

3、::v-deep

如果使用了预处理器都可以使用 ::v-deep

<style lang="scss" scoped>

/*用法1*/ .a{ ::v-deep .b { /* ... */ } }

/*用法2*/ .a ::v-deep .b { /* ... */ }

</style>