作用域CSS
當<style>標記具有該scoped屬性時，其CSS將僅應用於當前組件的元素。這類似於Shadow DOM中的樣式封裝。它有一些警告，但不需要任何polyfill。通過使用PostCSS轉換以下內容來實現：
<style scoped> .example { color: red; } </style> <template> <div class="example">hi</div> </template>
進入以下：
<style> .example[data-v-f3f3eg9] { color: red; } </style> <template> <div class="example" data-v-f3f3eg9>hi</div> </template>
＃混合本地和全局樣式
您可以在同一組件中包含范圍和非范圍樣式：
<style> /* global styles */ </style> <style scoped> /* local styles */ </style>
＃子組件根元素
使用時scoped，父組件的樣式不會泄漏到子組件中。但是，子組件的根節點將受父級作用域CSS和子級作用域CSS的影響。這是設計的，以便父級可以設置子根元素的樣式以進行布局。
＃深度選擇器
如果您希望scoped樣式中的選擇器“深入”，即影響子組件，則可以使用>>>組合子：
<style scoped> .a >>> .b { /* ... */ } </style>
以上將編譯成：
.a[data-v-f3f3eg9] .b { /* ... */ }
某些預處理器（如Sass）可能無法>>>正確解析。在這些情況下，您可以使用組合/deep/或::v-deep組合 - 兩者都是別名，>>>並且工作完全相同。
＃動態生成的內容
創建的DOM內容v-html不受范圍樣式的影響，但您仍然可以使用深度選擇器設置它們的樣式。
-
范圍樣式不會消除類的需要。由於瀏覽器呈現各種CSS選擇器的方式，
p { color: red }在作用域時（即與屬性選擇器結合時）會慢很多倍。如果您使用類或ID，例如in.example { color: red }，那么您幾乎可以消除性能損失。這是一個游樂場，您可以自己測試差異。 -
在遞歸組件中注意后代選擇器！對於帶有選擇器的CSS規則
.a .b，如果匹配的元素.a包含遞歸子組件，則.b該子組件中的所有組件都將與規則匹配。
源：https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors