最近在用vue、element-ui做项目，碰到页面css使用scoped下，修改子组件的css无效的问题。折腾了很久，找到了解决办法：通过 >>> 操作符类影响子组件，如下图：

详细参考：

https://vue-loader.vuejs.org/zh/guide/scoped-css.html

以下是本人的例子：

原css代码：

<style scoped>
    .image-uploader {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .image-uploader:hover {
        border-color: #409EFF;
    }
    .image-uploader .el-upload {
        width: 100%;
    }
</style>

使用 >>>操作符 修改后的代码：

<style scoped>
    .image-uploader {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .image-uploader:hover {
        border-color: #409EFF;
    }
    .image-uploader >>> .el-upload {
        width: 100%;
    }
</style>