大家都知道当
编译前：
.example {
color: red;
}
编译后：
.example[data-v-f3f3eg9] {
color: red;
}
看完你肯定就会明白了，其实是在你写的组件的样式，添加了一个属性而已，这样就实现了所谓的私有作用域。但是也会有弊端，考虑到浏览器渲染各种 CSS 选择器的方式，当 p { color: red } 设置了作用域时 (即与特性选择器组合使用时) 会慢很多倍。如果你使用 class 或者 id 取而代之，比如 .example { color: red }，性能影响就会消除。所以，在你的样式里，进来避免直接使用标签，取而代之的你可以给标签起个class名。
如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符:
.parent >>> .child { /* ... */ }
上述代码将会编译成：
.parent[data-v-f3f3eg9] .child {
/* ... */
}
而对于less或者sass等预编译，是不支持>>>操作符的，可以使用/deep/来替换>>>操作符，例如：.parent /deep/ .child { /* ... */ }
举个栗子
如果想将swiper当前默认蓝色状态改成白色
默认效果
css样式可以可以写
.swiper-pagination-bullet-active{
background: #fff;
}
看看效果会怎样
重置样式后效果
这个时候就可以用到深度作用选择器
/deep/.swiper-pagination-bullet-active{
//使用 scoped 后，父组件的样式将不会渗透到子组件中。
//使用深度作用选择器 /deep/ 或者'>>>' ,但注意像sass、less预处理器不认三个箭头
background: #fff;
}
使用深度作用选择器后效果
