当<style>标签有scoped 属性时，它的 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 CSS和子组件的scoped CSS的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式
深度作用选择器
如果你希望 scoped样式中的一个选择器能够作用得“更深”，例如影响子组件
1.普通css你可以使用 >>>操作符：
<style scoped>
.a >>> .b { /* ... */ }
</style>
上述代码将会编译成：
.a[data-v-f3f3eg9] .b { /* ... */ }
这样b元素后面就不会再有属性选择器了
2.同样，要是scss可以使用::v-deep操作符：
<style lang='scss' scoped>
::v-deep .a { /* ... */ }
</style>
3.同样，要是less可以使用/deep/操作符：
<style lang='less' scoped>
/deep/ .a { /* ... */ }
</style>
