SFC 的 style 标签加上 scoped 属性后，编译器会给当前组件的每个元素加上 data-v-xxx 唯一属性，并把所有选择器改写成带有该属性的形式，因此样式只命中本组件元素，父子组件之间天然隔离，团队协作时不用担心类名冲突。
隔离不是绝对的：scoped 样式不会作用到子组件内部元素（子组件根元素除外，会被父子两边的选择器命中）。想穿透到子组件内部的第三方组件，需要用 :deep() 伪类把选择器提升一个层级；而 scoped 与 CSS Modules 各有拥趸，前者零心智成本，后者类名在构建时生成更彻底。
<template> <p class="txt">这段文字的样式不会泄漏到别的组件。</p> </template> <style scoped> .txt { color: #4a9eff; } /* 穿透到子组件内部 */ .txt :deep(.inner) { font-weight: bold; } </style>