博主近期使用 vue 时写发现某些样式不生效，怎么都不生效， 不过将style 中的 scoped 去掉后，居然生效了，那么出现样式不生效的原因肯定就是 scoped 捣的鬼，在仔细研究过后得出了一些结论，包括为什么会出现这种情况和解决办法，在此分享。
为了便于展示和理解，博主在这里选择了一父组件和一子组件， 父组件： 首先，父组件引入子组件TestScoped
<template> <div class="parent"> <p>Here is parent component</p> <TestScoped /> </div> </template> <style> .parent { color: deepskyblue; } </style>子组件： TestScoped
<template> <div class="son"> <p>Here is son component</p> </div> </template>此时的HTML编译后的结果是:
<div class="parent"> <p>Here is parent component</p> <div class="son"> <p>Here is son component</p> </div> </div>没错，是我们所理解的样子，这时候因为在父组件中添加了如是的样式，那么肯定子组件的Here is son component也带有这个样式，结果的确是这样。
<style> p { color: deepskyblue; } </style>渲染后的结果。
也就是在父组件的style中添加scoped
<style scoped> .p { color: deepskyblue; } </style>此时的HTML编译后的结果是:
<div data-v-7ba5bd90 class="parent"> <p data-v-7ba5bd90>Here is parent component</p> <div data-v-7ba5bd90 class="son"> <p>Here is son component</p> </div> </div>此时的编译结果也能够理解，也就是 vue 给父组件的每一个标签自动添加一个唯一的 attribute, 这里 注意,你会发现vue给子组件的根标签也打上了这一个唯一的attribute， 但是子组件的其他标签却没有打上。
编译后会发现，添加的css样式变成了如下：添加了唯一的标签，这也就是vue scoped 实现样式隔离的原理
p[data-v-7ba5bd90] { color: deepskyblue; }由于子组件中除根标签以为其他都未打上父组件的唯一标签，那么可想而知，样式不会在子组件中生效，结果的确如此。 总结： 为什么vue组件中添加scoped后某些样式不生效？ 原因： vue的scoped为本组件的所有标签都打上了一个唯一attribute，样式生效时也带上了这唯一的attribute，但是本组件应用的所有子组件，除根标签以为其他都未打上这唯一标签，因此样式自然不会生效。
点击查看官方解决办法 vue给出的解决办法是： 深度作用选择器 如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符 有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。
通常我们会选择/deep/，使用方式如下，在需要子组件样式生效的地方加上/deep/
<style scoped> /deep/p{ color: deepskyblue; } </style>此时HTML编译结果不会改变，只是样式的生效方式不同了，变成了如下：
[data-v-7ba5bd90] p { color: deepskyblue; }这样便使得css生效
博主一般不会使用/deep/，因为嫌麻烦，每一个要用的地方都得写，因此，博主的选择是采用两个style，其中一个添加scoped，写组内的样式，另一个不添加，修改子组件的样式
<style scoped> p{ color: deepskyblue; } </style> <style> </style>相信只要你看完这篇博文，你肯定能够完全理解为什么scoped后样式不起作用了，可以的话点个赞让更多的人看到，有什么不理解的可以评论，博主会及时回复的！！我们下篇再见！！
