在style标签中添加一个scoped属性，可以使css样式只作用于加了scoped属性的vue组件。例如 A.vue 中的<style>标签中加了 scoped 属性，那么<style>标签中的样式只作用于 A.vue
1. scoped作用原理
scpoed 是vue中引入的处理样式的属性，简单理解就是给当前组件样式加一个唯一的属性为组件内的css样式作用域，该属性用data-v-hash 的方式对模块进行标识，当我们在style标签中添加scoped属性后，vue在该组件进行编译后会在组件里面的dom元素中添加data-v-hash属性。具体写法如下：
<template>
<div data-v-4f513038="" class="test"></div>
</template>
<style scoped>
.text {
font-size: 20px;
}
</style>
2. 深度作用选择器
如果我们希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，可以使用深度作用操作符>>> 。
以elementUI组件中el-button为例，现在我们想从新定义el-button中按钮样式,把样式按钮变成了红色
<template>
<div class="test">
<el-button type="primary">主要按钮</el-button>
</div>
</template>
<style scoped>
.test >>> .el-button--primary {
color: #fff;
background-color: red;
border-color: red;
}
</style>
有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。
