Vue2中使用样式 Scope失效 解决方法

想让组件单独使用一个样式，而不是全局样式。这样就需要使用到<style scoped><style>这种方式，但是如果直接加上就开始使用，这样是不会生效的。

<style scoped>
/deep/ .el-form--label-top .el-form-item__label {
    padding-bottom: 0px;
}
</style>

需要在样式css前加上/deep/才可以。 具体是因为这样vue在渲染组件中元素时会加上一个标识，例如

<div data-v-22232efb class="button-warp">
 <button data-v-22232efb class="button">text</button>
</div>

正因为有这个标识，所以对应的组件里面的css也会被加上标识，这样就可以保证组件样式的唯一性，避免了css的污染。

[data-v-22232efb].el-form--label-top .el-form-item__label {
    padding-bottom: 0px;
}