Scope和样式穿透

主要适用于修改vue常用组件库的样式

原理

Vue中的Scope通过在Dom结构以及Css样式上加上唯一不重复的标记data-v-hash的方式，以保证唯一。

Scope三条渲染规则

  1. 给HTML的DOM节点加一个不重复的data属性，来表示它的唯一性
  2. 在每句css选择器的末尾（编译后的生成的css属性）加上一个当前组件的data属性来私有化样式。
  3. 如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性。

这个特性使你无法去直接修改组件库中内含的子元素的样式，因为它在进行PostCss转化的时候把data属性默认放在了最后面，而实际上Dom节点里data属性在他爹那里

修改方法

在你想要修改的地方加:deep(xxx)即可