vue项目中的style加上scoped后(样式穿透)

为了vue页面样式模块化，不对全局造成污染，建议每个页面的style标签加上scoped，表示他的样式只属于当前的页面，父组件的样式不会泄漏到子组件中，就是只加载以及影响当前的组件，通过这个属性。但是scoped也会造成一些额外的负担，如无法覆盖原有组件的样式。但是往往有时候，我们在使用一些第三方插件的同时，又需要对第三方插件做一些细微的修改，那么我们就可以加 /deep/() 或者 >>>，设置样式穿透当前作用域。如下图，css和scss使用 >>>,less使用/deep/

加了scoped限制后，里面的样式优先级就比其默认样式优先级低。比如openlyers或者cesium带的一些默认的控件，都i有默认的样式，如果你在页面修改这个控件的样式，加了scoped局部限制后，你写的样式是没有效果的