最近在做一个项目，由于一个组件中使用两个style标签，一个含有属性scoped（私有样式）），一个不含(全局样式)，在写样式时发现有的样式不起作用，在改变子组件的样式时也遇到了改变样式不起作用的问题，后面网上搜索解决办法，问题解决了但是感觉莫名其妙的（又是全局，又是局部，又是要改变子组件样式，感觉比较懵），不知道为什么会导致这些问题，后面通过学习scoped作用及原理作了个总结，并且收藏了自己觉得比较有用的文章，并且分享给大家，不对的地方望指正。
scoped的作用
在style标签上使用scoped属性主要是实现样式的私有化，防止对全局样式造成污染。但是在
使用scoped过程中可能不知不觉就出现了很多麻烦，造成额外的复杂度，所以不推荐使用。
scoped原理
scoped主要是给属性添加一个额外的动态属性来选中该dom。
例如，转译前：
.content{ color:red;}
转译后：
以下就是关于使用scoped过程中遇到的一些问题。
如何改变第三方组件（或加上了scoped标签作为子组件）的组件的样式（穿透方法）？
**方法一：**在组件中添加两个style样式（注：组件中是可以写多个style标签的）。
实际上这个方法也告诉我们在父组件中添加scoped属性后就不能改变子组件的样式了。
这个一开始我不太理解后面查看原理以及这篇文章就比较清楚了
对这篇文章中的的“解决办法”最后作一点小小的补充：
“解决办法”的浏览器渲染结果为：
其中文章中所写的border-raduis: 5px !important中的!important可不写，如上图依然有效。但是注意，必须是.content .button或者在样式后面加上！important,而不能直接写.button否则权重不够。
个人理解这种方法的本质是通过在父组件的全局样式改变想要改变子组件样式的权重从而达到目的，理解不对的地方希望指出
**方法二：**使用 >>>或者 /deep/ 操作符（Sass 之类的预处理器无法正确解析 >>>，可以使用/deep/）
<template>
<div class="content"> <v-button></v-button> </div></template>
<style lang="scss" scoped>
.content{ width: 1200px; margin: 0 auto; } .content /deep/ .button{ border-radius: 5px; }
</style>
或者
.content{ width: 1200px; margin: 0 auto; } .content >>> .button{ border-radius: 5px; }
</style>
在同一个组件中同时使用有scoped属性的style标签和没有scoped属性的是style标签，在两个style 标签里面同时改变同一个class的样式，哪个样式起作用？
根据scoped原理可知使用了scoped中样式起作用。
例如：
<template>
<div class="content">
</div>
</template><style scoped> .content{ width: 100px; height:100px; background: red; }</style><style> .content{ width: 100px; height:100px; background: black; }</style>
补充
最近看到两篇讲scoped比较好的文章，能够帮助更加清晰的理解
后续有遇到的问题还会补充上来，希望能帮助到你哦
