前言
为什么 <style scoped> 不会造成样式污染，影响其他样式。
一、简单看一下vue编译或的结果
发现每个标签几乎多了一个 “属性选择器” data-v-xxxxx
vue就是通过属性选择器来实现对css样式的隔离
二、生成规则
为什么有的标签有两个或多个属性选择器
根据这个Scoped CSS特性，父组件的样式不会渗透到子组件的样式，但是根节点会同时受其父组件的 scoped CSS 和子组件的scoped CSS的影响。所以会同时拥有两个属性选择器 data-v-xxxxx
父组件：
子组件：
三、如果要选择子组件如何实现？
通过深度作用选择器 可以使用 >>> 操作符：
<style scoped>
.a >>> .b { /* ... */ }
</style>
上述代码将会编译成：
.a[data-v-f3f3eg9] .b { /* ... */ }
参考链接：
