Scoped CSS
Scoped CSS規范是Web組件產生不污染其他組件，也不被其他組件污染的CSS規范。
vue組件中的style標簽標有scoped屬性時表明style里的css樣式只適用於當前組件元素
它是通過使用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屬性之后，父組件的style樣式將不會滲透到子組件中，然而子組件的根節點元素會同時被設置了scoped的父css樣式和設置了scoped的子css樣式影響，這么設計的目的是父組件可以對子組件根元素進行布局。
.vue模板中的樣式是根據需要按需加載，訪問一個頁面該組件中的樣式就會追加到head標簽中，如果父子組件中都對某個子組件根節點元素進行了控制，則父組件里的樣式會被后來的覆蓋。
深選擇器
如果想對設置了scoped的子組件里的元素進行控制可以使用’>>>’或者’deep’
<template> <div id="app"> <gHeader></gHeader> </div> </template> <style lang="css" scoped> .gHeader /deep/ .name{ //第一種寫法 color:red; } .gHeader >>> .name{ //二種寫法 color:red; } </style>
<div class="gHeader"> <div class="name"></div> </div>
一些預處理程序例如sass不能解析>>>屬性，這種情況下可以用deep，它是>>>的別名，工作原理相同。
動態生成的內容
使用v-html動態創建的DOM內容，不受設置scoped的樣式影響，但你依然可以使用深選擇器進行控制
官網說明：
參考文章
scoped CSS官網 https://vue-loader.vuejs.org/en/features/scoped-css.html
解決父組件無法修改子組件的問題 https://zhuanlan.zhihu.com/p/29266022
Scoped CSS規范 https://github.com/AlloyTeam/AlloyTouch/wiki/Scoped-CSS