vue中css样式的作用范围

在vue单文件组件开发中我们通常会在<style>标签上加上scoped属性 <style scoped>, 使用scoped之后样式只影响组件自身，这样可以避免影响到其他组件，如果不加该样式作用范围是全局的。

但有时候我们需要改变其他组件的样式，比如 比较常见的 引入第三方组件 , 我们需要修改样式时，就需要用到深度选择器

如 >>> , 有些像Less, Sass 之类的预处理器无法正确解析 >>>，这种情况下你可以使用 /deep/ 代替，效果是一样的

.a >>> .b { /* ... */ }
.a /deep/.b  { /* ... */ }

深度选择器的作用范围是本组件及其所有子组件孙组件。。。

问题：加了scoped再使用深度选择器有时候会失效，如element的tooltip组件，因为此时第三方组件的DOM结构在vue挂载点之外了，加了scoped即使 使用深度选择器也不会起作用。
解决办法：这个时候在单文件组件中可以写两个style标签，一个加scoped 一个不加， 把需要修改样式的第三方组件css放在不加scoped的标签就可以了。详情也可查看文档相应内容

<style>
/* 全局样式 */
</style>

<style scoped>
/* 本地样式 */
</style>