vue中组件的样式是有作用域的，默认是全局样式。
如果不希望当前组件中的样式影响到别的组件，可以添加作用域。通过给style添加scoped,使它的css只作用于当前组件的元素。
代码语言：javascript复制<style scoped>
</style>在有作用域的组件中如何给子组件设置样式？
默认只能作用到子组件的根节点（组件的class 默认作用到组件的根节点）
使用子组件的根节点本身的class类名
如果是第三方组件，不知道它的根节点的类名，那就审查元素查看，或者添加一个类名
// APP.vue
代码语言：javascript复制<style scoped> //在根组件中设置HelloWorld 组件的样式，给根节点加了个边框，生效。
.hello {
border: 1px solid #000;
}
</style>但是
// APP.vue
代码语言：javascript复制<style scoped> //在根组件中设置HelloWorld 组件的样式，给根节点加了个边框，生效。
.hello {
border: 1px solid #000;
}
//在其中再设置HelloWorld 组件中h1的样式，没效果。
h1 {
color: red;
}
</style>此时
代码语言：javascript复制//APP.vue
<style scoped> //在根组件中设置HelloWorld 组件的样式，给根节点加了个边框，生效。
.hello {
border: 1px solid #000;
}
//深度作用操作符（/deep/）,可以使样式作用的更深
/deep/ h1 {
color: red;
}
</style>
