vue深度选择器官方资料：https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

最近想修改iview 组件的样式，一直是拿着iview样式，自己重新仿造了iview组件格式，但是今天用到了穿梭框，看着重写特别麻烦，搜大量资料发现vue提供了通过父类修改子组件的深度选择器功能，与其相关的是vue-router 以及vue-loader

但是按照官方资料发现其一直无效，父组件修改不了子组件样式，查了一天资料，终于找到了原因,，原来是版本问题

vue-loader 需要 11.2.0以后版本才支持

vue-router需要 2.2.0以后版本才支持

现在贴出我的测试代码，vue-router 用的3.0.7

vue-loader使用了12.0.0，同时vue-style-loader3.0.0（大家应该知道vue-loader和vue-style-loader必须匹配吧）

测试代码

<template>
    <div style="margin-top: 20%">
        <Transfer
                :data="data4"
                :target-keys="targetKeys4"
                :render-format="render4"
                @on-change="handleChange4"></Transfer>
    </div>
</template>

<script>
    export default {
        name: 'Test',
        data () {
            return {
                data4: this.getMockData(),
                targetKeys4: this.getTargetKeys()
            }
        },
        methods: {
            getMockData () {
            ......
        }
    };
</script>

<style scoped lang="css">
    /*.ivu-transfer >>> .ivu-transfer-list-header{*/
        /*background-color: red;*/
    /*}*/
    .ivu-transfer /deep/ .ivu-transfer-list-header{
        background-color: red;
    }
</style>

根据官网，使用>>> 或者 /deep/ 均可以实现修改样式。将穿梭框头背景颜色设置为红色