vue中的style使用的几个小技巧

scoped私有化样式

将当前模块（页面）的样式仅仅运用在当前，有效实现多页面样式隔离，实现各自功能互不干扰。

<style scoped>
.avatar-uploader { height: 100px; }
.el-step.is-simple .el-step__title { font-size: 14px; }
.el-form-item { margin-bottom: 20px; }
.el-input { width: 500px; }
</style>

框架样式重设

使用框架时必然会遇到需要重设框架样式的问题，比如：element.js 框架，使用 >>> 来重设框架样式。

.config { border-left: 0px solid #eee; animation: slideInRight .2s ease; }
.config >>> .el-tabs__item { width: 50%; text-align: center; }
.config >>> .el-tabs__nav { width: 100%; float: none; }
.config >>> .el-tabs__header { margin-bottom: 0; }
.config >>> .el-upload { display: block; }