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