Vue文件中的style标签上有一个特殊的属性，scoped。当一个style标签拥有scoped属性时候，它的css样式只能用于当前的Vue组件。
scoped实现原理:给一个组件中的所有dom添加了一个独一无二的动态属性，给css选择器额外添加一个对应的属性选择器，来选择组件中的dom,这种做法使得样式只作用于含有该属性的dom元素(即组件内部的dom)
实际开发中，经常遇到组件的样式覆盖不掉，这时候就需要用到深度选择器
scss语法 ::v-deep
::v-deep .hm-button:first-child {
margin-right: 20px;
}
less语法
/deep/ .hm-button:first-child {
margin-right: 20px;
}
css语法
>>> .hm-button:first-child {
margin-right: 20px;
}
