Vue中的深度选择器无效

官方的说法是：

如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符。

我的使用方法（chart是import进来的组件，内部有picture_header的class）：

<tempelate>
    <chart class="aaa">
    </chart>
</tempelate>

<style scoped>
    .aaa >>> .picture_header {
        background-color: red !important;
    }
</style>

按理说编译出来的css应该是

.aaa[data-v-f3f3eg9] .picture_header { /* ... */ }

但我看到的却是

.aaa >>> .picture_header[data-v-f3f3eg9] { /* ... */ }

就是说深度选择器并没有被正确解析，chart中的picture_header类确实也没有改变背景颜色。请问是为什么？

还有个小问题，就是要改变引入组件的样式，是不是都要加important，才能把原有的样式覆盖掉？

http://www.cnblogs.com/mengfangui/p/9183593.html

我建议你使用 /deep/来尝试一下，并不是所有的样式都需要！important才能覆盖掉，还是要看权重的，如果用的是组件的话权重不是很明显，所以还是要尝试不同的方法