Deep Selector
vue中，css样式通过<style>标签实现。当<style>标签添加``scoped属性时，其中的css样式将只作用于当前组件。类似如下代码：
<style>
/* global styles */
</style>
<style scoped>
/* local styles */
</style>
实现原理则是通过PostCSS对代码进行转变：给当前组件添加类似data-v-f3f3eg9的属性，同时style中的css代码添加属性选择器。
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>
转变为：
<style>
.example[data-v-f3f3eg9] {
color: red;
}
</style>
<template>
<div class="example" data-v-f3f3eg9>hi</div>
</template>
这样做的好处，是把样式的影响局限在当前组件内，以避免污染全局环境。唯一不足，就是子组件只有根元素被打上了父组件的属性。也就是说，子组件除根节点外，其他节点都不受父组件scoped样式影响，所以我们没法直接在scoped中修改子组件的样式。
然而，我们有时候会希望，把对某个组件的样式修改，局限于其父组件内部，以避免影响全局。方法之一，可以使用sass/less的嵌套css结构，父组件加一个class，在该class选择器内对子组件样式进行修改。然而，总归是不够 elegant.
幸好幸好，vue在12.2.0 版本引入了Deep Selector这个功能。通过使用该功能，可以很好地实现我们局限于当前组件内部，修改其子组件样式而不至影响全局样式的目的。
<style scoped>
.a >>> .b {
/* ... */
}
</style>
会被编译为：
.a[data-v-f3f3eg9] .b {
/* ... */
}