组件样式不能修改原因
当 vue 中 style 使用了scoped时，起到了样式私有化的作用
而scoped有三条渲染规则：
- 给HTML的DOM节点加一个不重复data属性(形如：data-v-123)来表示他的唯一性
- 在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-123]）来私有化样式
- 如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性
CSS会给一个组件中的所有dom添加了一个独一无二的动态属性data-v-xxxx
然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，这种做法使得样式只作用于含有该属性的dom——组件内部dom, 从而达到了'样式模块化'的效果.
解决策略
Vue 提供了样式穿透:deep() 他的作用就是用来改变 属性选择器的位置
